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

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

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

[list([1, 2, 1]) list([5, 4, 6]) list([7, 20, 9])]

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>