I have a set of images for which I am specifying explicit width and height attributes in the HTML, so that space is reserved for them while the page is loaded (this avoids page "jumps" when images take longer to load).
On the other hand I don't ever want the images to take more space than the available width of the viewport. So if the viewport is too narrow the images should resize. For this I added the following CSS styles:
img.resizable {
max-width: 100%;
height: auto;
}
The problem: As soon as I set height:auto in the CSS, space for the image is not reserved anymore during page loads and I get the page "jumps" effect. If I remove height:auto, then if the image resizes the aspect ratio will not be preserved. Any suggestions on how to approach this?
A non-Javascript solution would be preferred if possible.
I solved this with hints from this blog post that explains how to use CSS to set the aspect ratio of a fluid element.
Basically the solution looks as follows:
<div style="width: [width]px; max-width:100%; position:relative">
<div style="padding-top: [aspect]%"></div>
<img style="position:absolute; top:0" src="...">
</div>
where: [width] = image width, [aspect] = 100 * image width / image height
Basically with this the browser has the following information:
The initial width of the image (set in the outer div via width)
The aspect ratio (set in the inner div via padding-top)
The resizing behaviour (set in the outer div via max-width)
With this I achieve the desired behaviour: No page jumps upon initial load, and automatic resizing (keeping the aspect ratio) for narrow viewports.
Related
I want a section of my site (banner) to be an image that fit all width and for the image to maintain the full width (not the px width, but in percentage) at all times. I don't care about the height being too low, I need the image to always show all the width content and the height to be auto.
I'm using background-size: contain and this keeps the full width of the image but the height needs to be calculated, because then the container height will be higher than the image's. I've tried using viewport units but it's not consistent between different resolutions (maybe I'm doing it wrong but the value for a higher resolution doesn't work for a lower one).
How would I make this responsive?
The markup:
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
I'm using CSS for this image because, as we all (should) know, design images don't belong in the markup. So the image has to fit all the width, what would be the difference between 100% and 100vw? The first one is the parent's width, body has all the width in the screen and the second is the (again?) the device's width?
Will this approach be compatible with tablets and phones? Should I use a second image optimized for these cases?
To calculate the height of the element I'm using a formula that calculates the height while maintaining the aspect ratio:
New height = New width / (Original width / Original height)
So translating this into css gives:
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
This approach offers a fluid scaling, so no break points needed.
I am designing an HTML5 card game that will run as a mobile app, and need the #table div to scale to fill but not overflow the offsetParent div while maintaining the table's correct aspect ratio of 68%. This means that it should adjust its size to fill but not overflow either parent width and parent height so that it works in both portrait and landscape.
An example is how background-size: contain works when setting the background image. Only I'm not trying to set the background image, I'm trying to set the size of a child div. This way I can use percentage values for all subsequent elements on the table and have the game look exactly the same with exactly the same aspect ratio at all sizes.
Thanks!
UPDATE 1
Here is my code. See how the table is chopped off on the bottom for wide and short screen sizes:
http://vedanamedia.com/clients/intuitive-eye/speakeasy/
UPDATE 2
I am going for something just like this (jsfiddle.net/webtiki/dAebS) or this (dabblet.com/gist/2590942) except it also respects the shrinking height of the container.
You could try removing the default height, and adding padding bottom to create the correct aspect ratio and ensure it remains the same when re-sized.
I'm not completely sure I understand what you mean by 68% as you don't have a code pen setup, but I've added below an example for something which is an aspect ratio of 2:1 to see if this might be a possible fix for you.
div {
padding-bottom: 50%;
height: 0;
}
Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;