img tag height and width plus CSS max-width

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
It's now considered a good practice to use a max-width in CSS for an image  
in a responsive design in order to scale images down on smaller devices.  S
omething like.

img {
  max-width: 96%;

Note that most commonly it's done with 100%, but I prefer to leave some bre
athing room.

In the old days, it was considered a good practice to specify the height an
d width as tag attributes, so that the browser could allocate the space imm
ediately, and not have the page shift around as images load.

<img src="logo.gif" alt="logo" width="150" height="100">

But, that will conflict with the CSS max-width setting.  In particular, the
 height would remain at 100 pixels even when the width shrinks, since maint
aining the aspect ratio depends upon only one value being set.

Is there any CSS setting I can use to negate the height attribute when the  
max-width applies?  Otherwise I have to remove the height attribute, and we
're back to the jumpy page syndrome.  (Try pulling up on a cell pho
ne without broadband connectivity, and assume that you're a little impatien
t and want to start clicking on links as soon as you see them.  Oops, it ju
mped, and how I went to some page I didn't want.  Got to go back, still too
 impatient, whoops it happened again ... )

Re: img tag height and width plus CSS max-width

On Mon, 15 Sep 2014 08:56:27 -0700 (PDT), wrote:
Quoted text here. Click to load it

Use "height:auto".

Re: img tag height and width plus CSS max-width wrote:

Quoted text here. Click to load it

See my post "Background on the new Picture element" for a different
way of solving the same problem - it's an element that can be used
to wrap the image and allows the site to specify different size images
for different media - avoids scaling issues, and ensures that mobile
users don't have their data plan hammered when browsing image heavy
sites. Hopefully this will see rapid adoption in mobile browsers,
and has the advantage that it should degrade simply to the image
element only in non-supporting browsers.

Re: img tag height and width plus CSS max-width

On Monday, September 15, 2014 12:37:58 PM UTC-4, David Stone wrote:
Quoted text here. Click to load it
age in  
Quoted text here. Click to load it
Quoted text here. Click to load it


I actually found that post after submitting this one.  That's definitely ve
ry cool, albeit with a rather cryptic syntax.  From what you quoted, I beli
eve the "problem" you were saying it solves was the image size scaling, not
 the hint to the browser about how much space to allocate.

But, as a different solution to that problem, it still leaves me with the q
uestion of how to tell the browser how much space to allocate.

In fact, I think it complicates the issue, since the different source image
s can have different aspect ratios (just confirmed that in Chrome).  A litt
le weird, but potentially useful, especially in the "Art Director" scenario
.  So how do I now tell the browser the different heights of each image in  
the srcset?

Also, I think the max-width property is still useful, since the image sizes
 are discrete, not continuous.  So, for a given image from the srcset, I mi
ght still want to scale it, but just for a smaller range of values before w
e switched to a different image.

And, JJ, thanks for the tip on height: auto.

Re: img tag height and width plus CSS max-width wrote:

Quoted text here. Click to load it

It may be better to set a max-width on a container for the image, then
simply set the image width to 100% (also apply margin/border/padding to
taste). That way, you'll automatically get the aspect ratio preserved.

For the picture element stuff, I'm still poking around for a more  
detailed description, but it looks promising for a number of reasons
(not least being the issue with pre-fetched images mentioned in the
article I linked).  Still need to play with that myself.

Re: img tag height and width plus CSS max-width

You know, the more I think about it, the more I wonder if height: auto will
 really help.  The width and height attributes don't tell the browser the n
ative size of the image, they tell it how big you want it to be displayed.  
 So, when I use height: auto I'm basically negating that request for a spec
ific height, but the browser still doesn't know what the real height will b
e until the image has downloaded.  Which means that my page will jump aroun
d.  (Going to test this on a server with some delays built in as soon as I'
m done typing ...)

height: auto will at least allow the image to be responsive and shrink with
 a constant aspect ratio, though.

Site Timeline