是否有办法根据包含文本的兄弟元素调整图片的大小?

Question

我有一个div容器，里面有两个元素，一个包含文字，另一个包含图片我想让图片的高度根据它的兄弟容器来调整大小它的兄弟容器包含文本

例如，如果我的文本容器的高度是500px，我的图片的容器的高度调整为500px而不失去其长宽比

Answer 1

您可以使用我在这里添加的实现类型。使图像height: 100%;和object-fit: cover;固定宽高比。

body {
max-width: 780px;
margin: auto;
}
img {
max-width: 100%;
}
.parent {
display: flex;
flex-wrap: wrap ;
}
.child {
flex: 0 0 50%;
}
.child img {
height: 100%;
object-fit: cover;
}

<div class="parent">
<div class="child">
<img src="https://images.pexels.com/photos/12004363/pexels-photo-12004363.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="">
</div>
<div class="child">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas ipsam eveniet cupiditate recusandae, ratione tenetur suscipit, quia est vel quasi, a ex maxime! Reiciendis quae delectus cum praesentium. Aliquid, necessitatibus?
</p>
</div>
</div>