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根据图像的大小（或其他＆＃39; .purchase＆＃39; div的内容，如果它有更高的高度）调整大小。

希望它有所帮助，因为我只是猜测你在这里想做什么。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试从height:60%;移除.landscape，而是为.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>

Answer 3

好的，我已经通过使用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>

IMG高度设定为60％，但父DIV仍然延伸至100％

3 个答案: