【发布时间】：2019-09-03 18:27:02
【问题描述】：
我想将图片的高度增加到 400 像素。但是，在保持纵横比的同时，图像不会填充 div。
我之前向我的图像添加了 height:100%，同时向我的父 div 添加了 400px 的固定高度，然后向图像添加了 object-fit:cover。但是，在调整页面大小时，图像不会保持它们的比例，而是挤压/折叠。
任何帮助都会很棒。谢谢。
#test {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#test h2 {
font-family: 'Poppins';
text-transform: uppercase;
font-weight: 600;
font-size: 1.3em;
color: #333;
margin-bottom: 20px;
}
#picwrapper {
width: 85%;
}
@media only screen and (max-width: 986px) {
#picwrapper {
flex-direction: column;
}
}
#picwrapper {
display: flex;
flex-wrap: wrap;
}
.third {
width: 33.3333333333%;
position: relative;
}
@media only screen and (max-width: 986px) {
.third {
width: 100%;
}
}
.third img {
max-width: 100%;
height: auto;
display: block;
padding-top: 10%;
/* 4:3 Aspect Ratio */
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9));
}
.overlay-text {
font-family: 'Poppins';
font-weight: 500;
}
.third:hover .overlay {
opacity: 1;
}
.overlay-text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}<section id="test">
<div id="picwrapper">
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Parkash Sandhu</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">Flo Music</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-_August_31.jpg">
<a href="#">
<div class="overlay">
<h1 class="overlay-text">British Athletics</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://solarsystem.nasa.gov/system/news_items/main_images/853_ph3_waxing_gibbous_2k.jpg">
<a href="AUDI/audi.html">
<div class="overlay">
<h1 class="overlay-text">Audi</h1>
</div>
</a>
</div>
<div class="third">
<img src="https://cdn.zmescience.com/wp-
content/uploads/2018/11/Magnificent_CME_Erupts_on_the_Sun_-
_August_31.jpg">
<a href="Virgin Atlantic">
<div class="overlay">
<h1 class="overlay-text">Virgin Atlantic</h1>
</div>
</a>
</div>
</div>
</section>【问题讨论】：
-
您希望图像在所有屏幕分辨率下都保持 400 像素的高度吗？即，您不希望它们响应式地缩小尺寸？相反，您希望它们在保持 400 像素高度的同时进行换行？
-
@DonkeyShame 嘿，我希望它们响应式缩小，但我希望保持纵横比，而不是从右侧挤压图像（如果有意义的话）？
-
我想通了。发布了一个在某些方面与您不同的实现的答案。如果它不符合您的需求，请告诉我。
-
@DonkeyShame 完美的解决方案。感谢您的发现！
标签： html css responsive