html - IMG 高度设置为 60%，但父 DIV 仍然延伸到 100%

Question

在我们的电子商务元素中，所有照片都是正方形的。所以有些产品在顶部和底部有很多空白。我不想在不编辑照片(数千张)的情况下“剪切”那个空间。我几乎达到了我的目标。但是父 DIV 延伸到 IMG 的基本 100%。

.container {
	box-sizing: border-box;
	width: 100%;
	padding: 0 40px;
}

.main-header {
	height: 80px;
	width: 100%;
	background-color: grey;
}

.product {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 20px;
}

.media {
	flex: 1;
	background-color: grey;
	margin-right: 20px;
}

.landscape {
	object-fit: cover;
	width: 100%;
	height: 60%;
}

.purchase {
	width: 160px;
	background-color: grey;
}

	<div class="container">
		<header class="main-header">
			
		</header>
		
		<content class="product">
			
			<div class="media">
				<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
			</div>
			
			<div class="purchase">
				
			</div>
		
		</content>
	</div>

Answer 1

您可以从图像中删除 height: 60%(这不会影响您的图像，但会影响 .media 的 div 高度，因为该 div 没有高度设置为它。)。现在，容器 div 会根据图像的大小(或 flex-container 中另一个“.purchase”div 的内容，如果高度更高)调整大小。

希望对您有所帮助，因为我真的只是在猜测您在这里要做什么。

.container {
	box-sizing: border-box;
	width: 100%;
	padding: 0 40px;
}

.main-header {
	height: 80px;
	width: 100%;
	background-color: grey;
}

.product {
	display: flex;
	flex-flow: row nowrap;
	margin-top: 20px;
}

.media {
	flex: 1;
	background-color: grey;
	margin-right: 20px;
}

.landscape {
	object-fit: cover;
	width: 100%;
}

.purchase {
	width: 160px;
	background-color: grey;
}

	<div class="container">
		<header class="main-header">
			
		</header>
		
		<content class="product">
			
			<div class="media">
				<img class="landscape" src="https://cdn.shopify.com/s/files/1/0286/1214/products/Trance-3-Color-B-Neon-Green.jpg">
			</div>
			
			<div class="purchase">
				
			</div>
		
		</content>
	</div>