如果 div 的宽度小于图像的实际宽度，则以 100% 宽度显示图像答案

【问题标题】：Display image at 100% width iff the width of div is less than actual width of image如果 div 的宽度小于图像的实际宽度，则以 100% 宽度显示图像
【发布时间】：2014-11-26 22:30:51
【问题描述】：

这是我的 HTML：

<div>
    <img src='image.png'>
</div>

这是我的 CSS：

img {
    width: 100%;
    color: orange;
    background-color: orange;
}

div {
    width: 200px;
    height: 500px;
    border: 1px solid black;
}

小提琴：http://jsfiddle.net/ro764g6o/

图像变为 div 的 100% 宽度。有没有办法我可以说“如果'100%'（容器的宽度）大于图像的原始宽度，则使用图像的原始宽度”？

例如，假设 div 的宽度为 50px，图片原始宽度为 60px（div 的宽度是根据屏幕大小动态生成的，图片由最终用户决定）。在这种情况下，图像的宽度应为 100%。

但是，如果 div 的宽度是 70px，而图像的原始宽度是 60px，那么宽度应该保持不变。

有没有办法通过 HMTL 和 CSS 实现这一点？如果没有，是否有使用 Django / Python 来实现这一点？

【问题讨论】：

标签： html css django responsive-design image-size

【解决方案1】：

是的。它叫max-width：

img {
    max-width: 100%;
    /* ... */
}

http://jsfiddle.net/ro764g6o/1/ - 调整窗格大小以查看

【讨论】：