将一类不同的图像缩放为父级，但不大于其原始大小

Question

如何将图像流畅地缩放到其父容器的宽度，但不大于其原始宽度。

E.g。如果我的图像宽度为500px，我不希望它变大，但我希望它在父级容量小于500px时使用其父容器缩小。

width: 100%;
max-width: 500px;

有效，但如果我需要为不同大小的图像类定义CSS规则，我该怎么办？没有JavaScript，这可能吗？

Answer 1

只需使用max-width:100%即可。在下面的示例中，原始图像宽度为245px，第3个div比它宽。

＆＃13;

＆＃13;

img {
  max-width:100%;
}

#a {
  width:80px;
  background:yellowgreen; 
}

#b {
  width:160px;
  background:gold; 
}

#c {
  width:320px;
  background:tomato; 
}

div {
  float: left; 
}

＆＃13;

<div id=a><img src="http://i.imgur.com/74sI3aX.gif" alt=img></div>
<div id=b><img src="http://i.imgur.com/74sI3aX.gif" alt=img></div>
<div id=c><img src="http://i.imgur.com/74sI3aX.gif" alt=img></div>

＆＃13;

＆＃13;

＆＃13;