I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
Related
I'm creating a site using bootstrap.
I would like to prevent the window from resizing at all from a certain point and downwards.
I currently have it set at:
html, body{
min-width: 300px;
max-width: 3000px;
min-height: 550px;
max-height: 1500px;
}
seems to work perfectly for the width, once the window reaches 300px in width, the width of the window locks and cannot be scaled down any further.
for some reason though, it will not work for the height, no matter what parameters and dimensions I set, I can fully scale the height of it.
Not sure how to work around this so that once the window reaches 550px of height, the height also locks and cannot be scaled down any further.
Any help would be appreciated. Thanks!
thats not an an issue, actually what you are saying, is device width not the document or window width, if you are worried about responsiveness, no device exist on the world whose height can be changed, atleast i dont know,
this should not be an issue, you are scaling the browser's(device) height and width , but the actual window sizing is working same like the width, ,,
i mean that css code is working fine, but you cannot notice that,
It's because max-height overrides height, but min-height always overrides max-height. So you can't use them in the way you intend.
You need to target with media queries:
body { height:550px }
#media (min-height: 550px) { body {height: 100vh }}
#media (min-height: 1500px) { body { height: 1500px }}
This is what I have so far for rendering an image that's 800 x 534 pixels. So far I have it scaling properly for users with smaller screen sizes and I am able to set a maximum image size for larger screen sizes.
I'm just curious as to how to modify this code so it works with as many browsers as possible, If there's an innerwidth or innerheight option I could use without relying on javascript then I'd go for that.
The reason I ask is because when I scale the image on the small screen, I still have to scroll the page about the same number of pixels as the height of the browser decorations regardless of which browser I use, and I want to avoid the requirement to scroll to see the whole image.
<html>
<head>
<style>
IMG {width: 100%;height: auto; max-width:800px; max-height:534px;}
</style>
</head>
<body>
<img src="image.jpg" width=800 height=534>
</body>
</html>
Try this https://jsfiddle.net/2Lzo9vfc/10/
CSS
img {
width: 100%;
height: auto;
max-height: 100vh;
max-width: 100vw;
}
If your image is fixed size find on what window size it goes to scroll and use media queries to fix it.
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
I wonder if there is a way to prevent full width layouts from stretching on large screens. An example for that is mashable.com, on my screen (13 inch) the layout is in full width. If you try to zoom out the page, you will notice that the layout is not full width.
This is how the layout appear on small-medium screens:
And the below image is for larger screen, notice that it's not full width now:
Another example, the below design is a full width layout, I want to prevent stretching it out when viewing it on wide screens.
Any thoughts on that please? How can we achieve it in Bootstrap 3
Thanks,
Add a 'max-width' to your container/wrapper. For example:
.container {
width: 100%;
max-width: 1550px;
}
In this example the website would appear fully 'stretched' across the screen until the screen dimensions exceed 1550px wide.
See a scaled-down demo here
By default Bootstrap uses a 1140 pixel grid, see http://getbootstrap.com/css/#grid. Simply adding a .container around your content makes sure that content will never grow larger.
It's possible to customize the maximum size by creating a customized version of Bootstrap using http://getbootstrap.com/customize/ or by compiling Bootstrap yourself and setting the #container-large-desktop variable
Use max-width to stop getting 100% width on larger screens:
div.container{
margin: auto;
padding: 0;
width: 100%;
max-width: 1024px;
height: auto;
}
I need some CSS code to make my site fit the whole screen in different resolutions, however if screen goes too small, stop resizing and become scrollable. I've tried using a div covering the whole screen, and then setting width and height to 100%, with min-width set to 800px and min-height set to 600px, but its not working. Any ideas?
PS: Solution must be pure HTML/CSS, JavaScript is not possible for me now.
Try this:
http://jsfiddle.net/6CpbZ/
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
The concept is making the width or height or both 100% and then defining a min-width or min-height.