IMG 高度设置为 60%，但父 DIV 仍延伸到 100%答案

【问题标题】：IMG height set to 60% but parent DIV still stretches to 100%IMG 高度设置为 60%，但父 DIV 仍延伸到 100%
【发布时间】：2018-09-07 18:18:41
【问题描述】：

在我们的电子商务项目中，所有照片都是正方形。所以有些产品的顶部和底部有很多空白。我不想在不编辑照片（数千张）的情况下“削减”那个空间。我几乎达到了我的目标。但父 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>

【问题讨论】：

标签： html css image height

【解决方案1】：

好的，我找到了使用 Javascript 的解决方案。希望有一天我能找到纯 CSS/HTML 解决方案。

window.onload   = resizer;
window.onresize = resizer;
function resizer() {
	var div = document.getElementById('media');
	div.style.height = (div.offsetWidth / 1.5) + 'px';
};

div {
	box-sizing: border-box;
}

.container {
	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;
	overflow: hidden;
	margin-right: 20px;
	background-color: grey;
}

#media > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

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

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="reset.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Hello world!</title>
</head>
<body>
	<div class="container">
		<header class="main-header">
			
		</header>
		
		<content class="product">
			
			<div id="media">
				<img 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>
</body>
</html>

【讨论】：

【解决方案2】：

尝试从.landscape 中删除height:60%;，而是为.media 和.landscape 设置一个固定的高度（以像素为单位）。

.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;
    height: 600px;
    width: 100%;
}

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

.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>

【讨论】：

谢谢。但我不能使用像素。我有纵横比为 1:1 的图像，我想以纵横比（例如）16:9 来查看它们。但它们应该是响应式的，不能用作背景图片，只能使用标签。

【解决方案3】：

您可以从图像中删除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>

【讨论】：

首先——感谢您的时间和回答！我会尽力解释 ;) 我有照片 os 自行车。它们都是 2000x2000 像素。但是从实际的自行车视图来看，它们的顶部和底部有很多空白。所以我试图让这些照片更短，而不用在图形编辑器中裁剪它们（有数千张）。在我的版本中，我用 css“裁剪”了图像，但它不会影响容器。我正在尝试修复它。而且我不能将照片用作背景图片。