自动高度 div 上的 img 高度

Question

https://jsfiddle.net/ry9gyb8n/

嗨，伙计们，几周以来我一直在努力解决这个问题。 我有一个自动高度容器，容器中的左侧 div 是自动高度，因为它里面可以有各种不同的内容。 正确的 div 将始终有一个图像，但我不知道图像的高度。

如何使图像不超过左侧内容的高度？

 .container { float: left; width: 100%; height: auto; border: 2px solid black; } .leftContainer { float: left; width: 48%; border: 2px solid black; } .rightContainer { width: 50%; float: left; } img { max-width: 100%; }

 <div class="container"> <div class="leftContainer"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="rightContainer"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg"> </div> </div>

Answer 1

我会使用 flex 来创建布局并使用绝对位置使图像脱离流，因此它不会为其容器提供高度，因此高度将等于左侧的高度。 然后只需根据需要调整图像的属性以使其适合容器：

 .container { display:flex; border: 2px solid black; } .leftContainer { flex:1; border: 2px solid black; } .rightContainer { flex:1; position:relative; } img { position:absolute; top:0; max-height:100%; /* Or height:100%*/ max-width:100%; /*to center the image if needed*/ left:50%; transform:translateX(-50%); /**/ }

 <div class="container"> <div class="leftContainer"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="rightContainer"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg"> </div> </div>

另一种解决方案是使用与上面相同的布局并将图像作为背景。 您将遇到相同的情况，因为没有内容，因此高度将与左列相同。 然后使用背景属性调整图像位置/大小：

 .container { display: flex; border: 2px solid black; } .leftContainer { flex: 1; border: 2px solid black; } .rightContainer { flex: 1; position: relative; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/London_Bridge_Illuminated.jpg/1200px-London_Bridge_Illuminated.jpg"); background-size: contain; /* or cover or 100% 100% or auto*/ background-position: top center; background-repeat:no-repeat; }

 <div class="container"> <div class="leftContainer"> <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> <div class="rightContainer"> </div> </div>