如何在保持圖像高寬比的同時增加圖像高度

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>