如何在不拉伸图像的情况下限制图像宽度

Question

我正在尝试为不同大小的图像（在图像文件中）编写img 标签。对于大于容器的图像，我想将图像缩小到width: 100%。但是，我希望小于容器的图像可以放大；我希望它们在更大的窗口中查看时以自然大小呈现。

这是我尝试过的：

• <img src='image.jpg' alt='image'> 导致图像更大 比容器溢出。
• <img src='image.jpg' alt='image' style='width:100%;'> 缩小 比容器大的图像（好），但按比例放大 小于容器的图像 (BAD)。
• 在 Chrome 中，<img src='image.jpg' alt='image' style='max-width:100%;'> 缩小比容器大的图像（好）和 不缩放小于容器的图像（好）。 但是，在其他浏览器中，这就像<img src='image.jpg' alt='image'>。

编辑

我没有固定的容器宽度。它随着窗口的大小和相邻元素的大小而变化。

Answer 1

您可以使用例如：

div#div_img img{
    max-width:400px;  //Cointainers width
    width:100%;
}