img-流体无法正确调整图像高度
img-流体无法正确调整图像高度
提问于 2019-04-12 02:10:49
我正在使用Bootstrap 4，并试图有一个4个图像的网格，2在顶部和2在底部。我使用的是img-fluid类，但是图像会根据宽度调整大小，这只会使图像高度太大，而且会被截断。我试着设置max-height: 100%，但不起作用。
出什么问题了？
.images-container {
height: 95vh;
}
.nav-button {
width: 100%;
height: 50%;
margin: auto;
font-size: 5em;
color: black;
}
.footer-container {
text-align: center;
}
.bottom-nav-box {
font-size: 1.5em;
margin: 0;
}
.sim-image {
max-height: 100%;
}
i {
margin: auto;
}
body {
height: 100%;
}
html {
height: 100%;
}
footer {
height: 5vh;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-10 h-100 center-container">
<div class="row images-container">
<div class="row top-images-row h-50">
<div class="w-50 d-inline-block image-div">
<img src="https://lorempixel.com/875/656/" class="sim-image" id="simulatorImageTopLeft">
</div>
<div class="w-50 d-inline-block image-div" id="simulatorImageTopRight">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageTopRight">
</div>
</div>
<div class="row bottom-images-row h-50">
<div class="col image-div center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomLeft">
</div>
<div class="col image-div center-block text-center">
<div class="row">
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
<div class="col center-block text-center">
<img src="https://lorempixel.com/875/656/" class="img-fluid sim-image" id="simulatorImageBottomRight">
</div>
</div>
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-12 03:49:30
不是100%确定我对问题的解释是正确的，但是如果你想要一个2×2的图像网格，那么你应该能够像这样相对快速地完成它；
html:
<div class="panel">
<img src="blah" />
<img src="blah" />
<img src="blah" />
<img src="blah" />
</div>css:
.panel {
width = whateversizeyouwant;
height = whateversizeyouwant;
display: flex;
flex-wrap: wrap; //the flex stuff should make it display 2×2
}
.panel > img {
width: 50%;
height: 50%;
}这应该适用于任何一组4张图像。
如果你想让它们保持相同的长宽比，那么在.panel > img下设置height: auto。请记住，这不会给你一个完美的正方形，并且panel div的大小将影响图像的大小。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55638791
复制相关文章
相似问题
腾讯云开发者
