img max-width 100％，超量级img来填补div

Question

我在div中的img上使用max-width: 100%，以便在调整浏览器窗口时自动缩放图像。

如果div的宽度大于img宽度，是否有任何方法可以使图像在其初始尺寸上“超尺寸/放大”，具有相同的比例？

由于

Answer 1

实际上，您不需要max-width: 100%;。只需使用width: 100%;代替。例如：

img {
  width: 100%;
}

<img src="http://placekitten.com/500/500?image=9" />

以上小猫图像始终向上或向下扩展至其父级的100％。

---

您可以通过媒体查询获得一种条件逻辑。在下面的这个例子中，我们有一个标题和500px宽的图像。图片有max-width: 100%;。 那里有一个媒体查询，它说当视口宽度超过500像素时，图片的宽度应该是其父级宽度的100％ （并将正文背景设置为灰色以标识何时应用此媒体查询）。

HTML：

<h1>Pellentesque habitant morbi</h1>
<img src="http://placekitten.com/500/500?image=10" />

CSS：

img {
  max-width: 100%;
}

@media (min-width: 500px) {
  body  {
    background-color: #AAA;
  }  
  img {
      width: 100%;
    }
}

因此，当在宽视口内时，图像与该视口一样宽。

---

或者，尝试将图片设为背景图片，然后使用CSS background-size: cover;：

#image {
  background: #D84E51 url(http://placekitten.com/800/800?image=10) no-repeat center center;
  background-size: cover;
  min-height: 400px;
}