Caleb,
For inline images that are expected to scale down but grow no larger than their natural width, many use the method that you have described.
max-width: 100% !important;
width: auto !important;
height: auto !important;
I still think this is wrong use. Normally I would suggest
width: 100%;
max-width: 800px; /* natural pixel width of image */
height: auto;
Now I know the obvious flaw in this plan is not knowing ahead of time what the natural image width is… then also having to write a style for every image you want to be responsive in the way outlined at the beginning.
The browser, however, knows the natural width of each image. We can take advantage of that by writing our image style this way:
width: 100%;
max-width: intrinsic;
height: auto;
This lets the image scale proportionally without exceeding its natural size. For images that scale with their container, this:
width: 100%;
height: auto;
And that’s what I think.
freewaytalk mailing list
email@hidden
Update your subscriptions at: