javascript - 使 div 内的图像占用始终相同的空间

Question

<div id=“parent”>
    <div id = "child1">
       <img src="123"/> 
   </div>
   <div id = "child2"> 
      <p> Some text1 </p>
      <p> Some text2 </p>
   </div>
</div>

我有固定高度的父 div。父 div 总是有 2 个子容器:

• 1 个子元素 - 带有图像的 div
• 2 个 child - 带有一些数据的 div

容器内的图片大小可以不同。有时，当图像较大时，它在 #child1 和我的 #child2 中占用更多空间，文本变得只有一半可见。我可以看到“Some text1”段落，但看不到“Some text2”。

如何让我的图像在 #child1 中始终占据 #parent 中相同百分比的空间？ (可能是通过放大)

Answer 1

给 #child 和 #child2 宽度，然后使 img 元素的宽度为父元素的 100%。

.parent {
  height: 400px;
  width: 500px;
}

.child {
  width: 49%;
  display: inline-block;
}

.child img {
 width: 100%;
}

<div class=“parent”>
    <div class="child">
       <img src="https://thumbor.forbes.com/thumbor/1280x868/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F42977075%2F960x0.jpg%3Ffit%3Dscale"/> 
   </div>
   <div class="child"> 
      <p> Some text1 </p>
      <p> Some text2 </p>
   </div>
</div>