Адаптивная высота изображений при изменении размера - PullRequest
Новая
       6

Адаптивная высота изображений при изменении размера

0 голосов
/ 09 января 2019

Я действительно застрял с отзывчивыми изображениями. Короткая история. Я пытаюсь создать простую сетку, подобную этой

.

https://avenue -demo.squarespace.com

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

 <ul class="grid">
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
           </a>
      </li>
 </ul>

css: 

.grid {
    display: flex;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
    list-style: none;
}
.grid li {
    width: 30%;
}
img {
    max-width: 100%;
}

проблема в том, что изображения имеют разную высоту, когда я устанавливаю высоту img на высоту 100%, да, у изображений одинаковая высота, но при изменении размера они уменьшаются, а не меняются, как на этом сайте, который я разместил, как я могу это исправить?

1 Ответ

0 голосов
/ 09 января 2019

Насколько я понимаю, вам нужно иметь квадратные изображения, чтобы получить показанную отзывчивость, хотя я и внес некоторые изменения в ваш код, чтобы они выглядели как изображения с веб-сайта (что не всегда рекомендуется)
вот код ссылки пера
https://codepen.io/avreddy/pen/vvabbP

.grid {
    display: flex;
    max-width: 1100px;
    justify-content: space-between;
    margin: 0 auto;
    list-style: none;
}
.grid li {
    width: 30%;
}
.grid li a{
  position: relative;
  width: 100%;
  padding: 50% 0;
  display : block;
}
.grid li a img{
  position: absolute;
  width : 100%;
  top: 0;
  left: 0;
  height: 100%;
  object-fit : cover;
  
}
img {
    max-width: 100%;
}
<ul class="grid">
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546725923-697533ae284d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1546934164-73ef3631f62d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=933&q=80" alt="">
           </a>
      </li>
      <li>
           <a href="">
                <img src="https://images.unsplash.com/photo-1547014751-2b43a527b6fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1100&q=80" alt="">
           </a>
      </li>
 </ul>
...