时间戳

首页 > 解决方案 > 如何在保持图像纵横比的同时增加图像高度

html - 如何在保持图像纵横比的同时增加图像高度

问题描述

我想将图像的高度增加到 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>

标签： htmlcssresponsive

解决方案

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

我假设您希望图像始终保持其纵横比 (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

推荐阅读