Question

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

这是我尝试过的：

<img src='image.jpg' alt='image'>会导致图像变大而不是容器溢出。
<img src='image.jpg' alt='image' style='width:100%;'>缩小规模图像大于容器（GOOD），但放大小于容器（BAD）的图像。
在Chrome中，<img src='image.jpg' alt='image' style='max-width:100%;'> 缩小比容器大的图像（GOOD）和不缩放小于容器（GOOD）的图像。但是，在其他浏览器中，这与<img src='image.jpg' alt='image'>。

修改

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

Answer 1

您可以使用例如：

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