如何在保持图像高宽比的同时增加图像高度

Question

我想将图片的高度增加到400px。 但是，在保持宽高比的同时，图像不会填充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> 

Answer 1

在接下来的内容中，我对您的追求做了一些假设。

我假设您希望图像始终保持其宽高比（4：3），但仍要随着屏幕的增大/缩小而按比例缩放。

在下面，您将找到代码的另一种实现，但是我认为可以捕获您想要的实现。 至少，它可能会让您朝正确的方向前进。

（顺便说一句，这种长宽比技术归功于Andy Bell。请参阅此处： https ： //andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/ ）

 [class*="aspect-ratio-"] { display: block; position: relative; width: 100%; } [class*="aspect-ratio-"] > * { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .aspect-ratio-tv { padding-top: 75%; /* 4:3 */ } .gallery { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; } .gallery { width: 100%; } .gallery li { flex-basis: 100%; } @media screen and (min-width: 580px) { .gallery li { flex-basis: 50%; } } @media screen and (min-width: 960px) { .gallery li { flex-basis: 33.33333%; } } .gallery img { object-fit: cover; } .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; transition: 0.5s ease; background: linear-gradient(rgba(25, 25, 25, 0.9), rgba(25, 25, 25, 0.9)); cursor: pointer; display: flex; justify-content: center; align-items: center; } .overlay-text { color: white; font-size: 20px; text-decoration: none; } .overlay:hover { opacity: 1; text-decoration: none; } 

 <ul class="gallery"> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/phvbkGThElM/800x600" alt="A neon ferris wheel" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/H_mTtLykvKs/800x682" alt="A dimly lit drum kit" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/Hc42xXu_WOg/800x567" alt="Blueberries, close up" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/MfynxC5_tiU/800x999" alt="High angle waterfall" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/7ZTx1iA7a7Q/800x397" alt="Sunset coastal scence" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> <li> <div class="aspect-ratio-tv"> <img src="https://source.unsplash.com/pRvy1j4aINE/800x785" alt="High angle shot of a recording studio" loading="lazy" /> <a href="#0" class="overlay"> <h1 class="overlay-text"> TEST HEADING </h1> </a> </div> </li> </ul> 

请参阅此处以获取笔： https : //codepen.io/anon/pen/oOeBOj

Answer 2

不要指定宽度，仅指定高度。

 .moon { height: 100%; } 

Answer 3

指定宽度和高度将挤压图像。 只需指定高度。

  img { height: 50%; /*Change this to what you want.*/ } #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; } @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 { 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>