将图像调整大小以适应父级div

Question

我有一张宽度为 600px 的图片。

它需要放在一个宽度为 300px 的 bootstrap col-xs-6 或 12 的 div 中，并且如果屏幕宽度小于 300px，它需要被重新调整大小。

如何使用 CSS 中的 width 和 max-width 实现这一点？

- Applecow

Answer 1

只需要这样做：

img { 
  width: 100%; 
  max-width: 300px; 
  height: auto; 
}

- Peyman Mohamadpour

Answer 2

我认为这个可以解决你的问题。

img {
    width: 100%;
    max-width: 300px;
}

如果 div 的宽度大于 300px，则图像的最大宽度为 300px。如果 div 小于 300px，则图像应填充 div 的 100％ 宽度。

- hywak

Answer 3

.my-image {
    max-width:300px;
    width:100%;
}

这些规则基本上意味着，在其容器的完整宽度上显示图像，除非容器大于300px，在这种情况下，将图像限制为300px。

- Ionut Necula