Question

Is there any way to get the following effect using CSS?

• When container’s width is less than image’s original width, set image’s width to 100% of container’s width.
• When container’s width is larger than image’s original width, set image’s width to it’s original wdith.

Answer 1

I found that the following CSS code could achieve the goal. But according to CSS Standard, when the value of max-width is percentage, it is “calculated with respect to the width of the generated box’s containing block”. According to my understanding, set max-width to 100% should take no effect, but it seems wrong.

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

The code is tested in Firefox 12 and IE 9. See http://jsfiddle.net/EnZEP/