Резиновая галерея

532
24 июня 2017, 10:19

Имеется резиновая галерея. И пока фотографии одинаковой высоты, всё выглядит нормально, но как только какая-то фотка больше или меньше, естественно, выглядит все уже не так, как хочется.

Вопрос: как это исправить?

Задать картинкам фиксированную высоту нельзя, поскольку при изменении размера экрана рушатся их пропорции; в процентах не получается, поскольку их родительский блок li не имеет фиксированной высоты.

Как выкрутится в данной ситуации с помощью CSS? Или единственный выход здесь это JS?

.photo_wall { 
  width: 100%; 
} 
 
ul { 
  line-height: 0px; 
  overflow: hidden; 
} 
 
li { 
  float: left; 
  width: 25%; 
  height: 100%; 
  padding: 10px; 
} 
 
img { 
  width: 100%; 
}
<section class="photo_wall"> 
  <ul> 
    <li><img src="../img/photo2_1.jpg" alt="photo"></li> 
    <li><img src="../img/photo2_2.jpg" alt="photo"></li> 
    <li><img src="../img/photo2_3.jpg" alt="photo"></li> 
    <li><img src="../img/photo2_4.jpg" alt="photo"></li> 
  </ul> 
  <ul> 
    <li><img src="../img/photo3_1.jpg" alt="photo"></li> 
    <li><img src="../img/photo3_2.jpg" alt="photo"></li> 
    <li><img src="../img/photo3_3.jpg" alt="photo"></li> 
    <li><img src="../img/photo3_4.jpg" alt="photo"></li> 
  </ul> 
</section>

Answer 1
  1. Делаем адаптивные кирпичики по этой статье. Я взял квадратные, но можно сделать прямоугольники с любым соотношением между шириной и высотой.
  2. Количество кирпичиков в строке задаём медиа-запросами.
  3. Картинки помещаем фоном и задаём свойство background-size.

Если задать contain, то картинки будут видны целиком как здесь:
https://codepen.io/glebkema/pen/NggQvJ

.gallery-box { 
  border: solid 6px transparent; 
  box-sizing: border-box; 
  float: left; 
  overflow: hidden; 
  position: relative; 
  width: 100%; 
} 
@media (min-width:  500px) { .gallery-box { width: 50%; } } 
@media (min-width:  768px) { .gallery-box { width: 33.33333333%; } } 
@media (min-width:  992px) { .gallery-box { width: 25%; } } 
@media (min-width: 1200px) { .gallery-box { width: 16.66666667%; } } 
.gallery-box:before { 
  content: ''; 
  display: block; 
  height: 0; 
  padding-top: 100%; 
} 
.gallery-box__image { 
  background-position: center; 
  background-repeat: no-repeat; 
  position: absolute; top: 0; left: 0; 
  width: 100%; height: 100%; 
  -webkit-background-size: contain; 
     -moz-background-size: contain; 
       -o-background-size: contain; 
          background-size: contain; 
}
<div class="gallery"> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
</div>

А если cover, то заполнят собой всю доступную площадь. Получится похоже на инстаграм:
https://codepen.io/glebkema/pen/Zyygab

.gallery-box { 
  border: solid 2px transparent; 
  box-sizing: border-box; 
  float: left; 
  overflow: hidden; 
  position: relative; 
  width: 100%; 
} 
@media (min-width:  500px) { .gallery-box { width: 50%; } } 
@media (min-width:  768px) { .gallery-box { width: 33.33333333%; } } 
@media (min-width:  992px) { .gallery-box { width: 25%; } } 
@media (min-width: 1200px) { .gallery-box { width: 16.66666667%; } } 
.gallery-box:before { 
  content: ''; 
  display: block; 
  height: 0; 
  padding-top: 100%; 
} 
.gallery-box__image { 
  background-position: center; 
  background-repeat: no-repeat; 
  position: absolute; top: 0; left: 0; 
  width: 100%; height: 100%; 
  -webkit-background-size: cover; 
     -moz-background-size: cover; 
       -o-background-size: cover; 
          background-size: cover; 
}
<div class="gallery"> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/20060731_fulda_055_1280х800.jpg)"></div></div> 
  <div class="gallery-box"><div class="gallery-box__image" style="background-image:url(http://glebkema.ru/images/street_001.jpg)"></div></div> 
</div>

READ ALSO
Как правильно сверстать flexbox?
HTML

Как правильно сверстать flexbox?

Никак не получается выровнятьlogo по центру, при этом чтобы два элемента меню

 467
C# SSL соединение xNet, WebRequest
c#

C# SSL соединение xNet, WebRequest

Доброго времени суток, помогите решить проблему : при попытке сделать запрос на сайт sscasinoonline дает ошибку xNet

 1660
Обновить значение вычисляемого поля
c#

Обновить значение вычисляемого поля

Как можно обновить через код значение вычисляемого поля в проекте? При открытии в project'e в толстом клиенте - поле обновляется само и сохраняется...

 302
Настройка политики доступа к службе WCF
c#

Настройка политики доступа к службе WCF

У меня есть веб приложение MVC в него встроен wcf сервисПри отладке и разработке никаких проблем с ним не возникало, а как только я развернул...

 417