Блог

Главная - Вопросы по программированию - Как увеличить высоту изображения при сохранении соотношения сторон изображения

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

#html #css #responsive

#HTML #css #отзывчивый

Вопрос:

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

Ранее я добавлял высоту: 100% к своим изображениям, добавляя фиксированную высоту 400 пикселей к моему родительскому div, а затем добавлял 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>

Комментарии:

1. Вы хотите, чтобы высота изображений составляла 400 пикселей при всех разрешениях экрана? Т.е. Вы не хотите, чтобы они реагировали на уменьшение размера при меньших размерах? Скорее, вы хотите, чтобы они были обернуты, сохраняя их высоту 400 пикселей?

2. @DonkeyShame Привет, я бы хотел, чтобы они реагировали на уменьшение масштаба, но я хочу, чтобы соотношение сторон сохранялось, а не изображения были раздавлены справа, если это имеет смысл?

3. Я вроде понял. Опубликовал ответ с реализацией, которая в некоторых отношениях отличается от вашей. Дайте мне знать, если это не соответствует вашим потребностям.

4. @DonkeyShame Идеальное решение. Спасибо за находку!

Ответ №1:

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

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

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

(Кстати, спасибо Энди Беллу за эту технику соотношения сторон. Смотрите здесь: 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

Ответ №2:

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

 .moon
{
height: 100%;
}

Ответ №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>