https://jsfiddle.net/ry9gyb8n/ 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>
我会使用 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
