Как увеличить высоту изображения при сохранении соотношения сторон изображения - PullRequest
Новая
       9

Как увеличить высоту изображения при сохранении соотношения сторон изображения

0 голосов
/ 13 апреля 2019

Я хотел бы увеличить высоту своих изображений до 400 пикселей. Однако изображения не заполняют div при сохранении соотношения сторон.

Ранее я добавлял высоту: 100% к своим изображениям, добавляя фиксированную высоту 400 пикселей к родительскому элементу div, а затем добавляю объектное прикрытие: изображения к изображениям. Однако при изменении размера страницы изображения не сохраняют свое соотношение, а вместо этого получают сжатие / сжатие.

Любая помощь будет отличной. Спасибо. 

#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>

Ответы [ 3 ]

1 голос
/ 13 апреля 2019

В дальнейшем я делаю некоторые предположения о том, что вам нужно.

Я предполагаю, что вы хотите, чтобы изображения всегда сохраняли соотношение сторон (4: 3), нопо-прежнему масштабируется все больше и меньше пропорционально росту / уменьшению экрана.

Ниже вы найдете другую реализацию вашего кода, но, я думаю, она отражает то, к чему вы стремитесь.По крайней мере, возможно, это заставит вас двигаться в правильном направлении.

(Кстати, кредит Энди Беллу за эту технику соотношения сторон. См. Здесь: https://andy -bell.design / wrote /creation-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

0 голосов
/ 13 апреля 2019

Указание ширины и высоты приведет к сжатию изображения; просто укажите высоту. 

    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>
0 голосов
/ 13 апреля 2019

Не указывайте ширину, просто высоту. 

.moon
{
height: 100%;
}
...