如何使图像最大宽度相对于百分比父格子宽度？

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像素，您的图像将坚持300px;
• 如果您的容器宽度较小，那么图片将调整大小以适应它