IMG高度设置为60％，但父级DIV仍可拉伸到100％
[英]IMG height set to 60% but parent DIV still stretches to 100%
问题描述
在我们的电子商务项目中，所有照片均为正方形。 因此，某些产品的顶部和底部都有很多空白。 如果不编辑照片（数千个），我将不会“剪切”该空间。 我几乎实现了目标。 但是父级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>
3 个解决方案
解决方案1
0 2018-03-28 23:51:01
您可以删除height: 60%图像的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>
解决方案2
0 2018-03-29 03:35:19
尝试移除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>
解决方案3
0 2018-03-29 04:25:18
好的，我已经找到了使用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>
是否有一个CSS框架可以将div的高度设置为父级的100％？
[英]is there a css frameworks that allows to set height of div 100% of parent?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.