Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set width/height of image to avoid reflow on image load

When I use image tags in html, I try to specify its width and height in the img tag, so that the browser will reserve the space for them even before the images are loaded, so when they finish loading, the page does not reflow (the elements do not move around). For example:

<img width="600" height="400" src="..."/> 

The problem is now I want to create a more "responsive" version, where for the "single column case" I'd like to do this:

<img style="max-width: 100%" src="..."/> 

but, if I mix this with explicitly specified width and height, like:

<img style="max-width: 100%" width="600" height="400" src="..."/> 

and the image is wider than the available space, then the image is resized ignoring the aspect ratio. I understand why this happens (because I "fixed" the height of the image), and I would like to fix this, but I have no idea how.

To summarize: I want to be able to specify max-width: 100%, and also somehow make sure the content is not reflowed when the images are loaded.

like image 957
gabor Avatar asked May 31 '13 06:05

gabor


People also ask

How do you maintain height width ratio of an image?

The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.

Why it is important that you use the height and width attributes when dealing with images?

Adding the height and width attributes to your IMG SRC HTML tag allows the browser to know how much space to leave for an image. Without these values, the browser doesn't initially create a space for the image, which means elements surrounding the image are adjusted after it has loaded.

How do I fit an image to a div width?

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.

How do I adjust an image in a container?

Give the container a fixed height and then for the img tag inside it, set width and max-height . The difference is that you set the width to be 100%, not the max-width .


2 Answers

UPDATE 2: (Dec 2019)

Firefox and Chrome now deal with this by default. Simply add the width and height attributes as normal. See this blog post for more details.


UPDATE 1: (July 2018)

I found a much cleverer alternate version of this: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/. This still requires a wrapper element and it requires CSS custom properties, but I think it's much more elegant. Codepen example is here (credit to Chris Coyier's original).


ORIGINAL:

From this blog post by Jonathan Hollin: add the image's height and width as part of an inline style. This reserves space for the image, preventing reflow when the image loads, but it's also responsive.

HTML

<figure style="padding-bottom: calc((400/600)*100%)">   <img src="/images/kitten.jpg" /> </figure> 

CSS

figure {   position: relative; }  img {   max-width: 100%;   position: absolute; } 

The figure can be replaced with a div or any other container of your choice. This solution relies on CSS calc() which has pretty wide browser support.

Working Codepen can be seen here.

like image 88
wiiiiilllllll Avatar answered Sep 19 '22 00:09

wiiiiilllllll


I'm also looking for the answer to this problem. With max-width, width= and height=, the browser has enough data that it should be able to leave the right amount of space for an image but it just doesn't seem to work that way.

I worked around this with a jQuery solution for now. It requires you to provide the width= and height= for your <img> tags.

CSS:

img { max-width: 100%; height: auto; } 

HTML:

<img src="image.png" width="400" height="300" /> 

jQuery:

$('img').each(function() {      var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;     $(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">'); }); 

This automatically applies the technique seen on: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

like image 33
Paul Pritchard Avatar answered Sep 22 '22 00:09

Paul Pritchard