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

Question

这是我的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％宽度。有没有办法可以说＆＃34;如果＆＃39; 100％＆＃39;使用图像的原始宽度？ （容器的宽度）大于图像的原始宽度＆＃34;？

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

但是，如果div的宽度为70像素且图像原始宽度为60像素，则宽度应保持不变。

有没有用HMTL和CSS实现这个目标？如果不是，无论如何使用Django / Python来实现这个目标吗？

Answer 1

是。它被称为max-width：

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

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