如何使图像最大宽度尊重父 div 宽度的百分比？

Question

我有两个浮动的左侧 div.. 一个宽度 = 20% 另一个宽度 = 80%

在这个 20% 宽度的 div 中，我有一个宽度为 300px 的图像......

如果我的 20% 区域小于 300px，我想让我的图像调整大小并适合这个 20% div ...

像这样的东西：

<div class="container">

   <div style="float:left; width:20%;">

       <img src="imageWith300pxWidth.jpg" />

   </div>

   <div style="float:left; width:80%;"></div>

</div>

Answer 1

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

• 如果您的容器宽度大于 300 像素，您的图像将坚持 300 像素；
• 如果您的容器宽度较小，则图像将调整大小以适应它