Галерея для сайта

254

19 февраля 2017, 08:39

Как сделать так чтобы изображения разного размера в галереи отображались с одинаковой высотой и шириной. То есть чтобы они автоматически обрезались под размер.

Изображение 1 имеет в оригинале один размер а изображение 2 другой но при этом они корректно, не растянуто отображаются на странице.

Answer 1

Решением является указать способ заполнения объекта.

Если вы используете <div> с указанием фонового изображения:

background-size: cover - залить, без пустого пространства
background-size: contain - уместить, появятся пустые пространства (экранное каше)

Если вы используете тег <img> то следует использовать аналогичные CSS-свойства:

object-fit: cover - залить, без пустого пространства
object-fit: contain - уместить, появятся пустые пространства (экранное каше)

Answer 2

Можно использовать этот плагин: https://foliotek.github.io/Croppie/

var basic = $('#demo-basic').croppie({
    viewport: {
        width: 150,
        height: 200
    }
});

Answer 3

Для этих целей можно использовать такую конструкцию:

body { 
  margin: 0; 
  padding: 0; 
} 
.gallery { 
  max-width: 100%; 
  width: 500px; 
  margin: 30px auto; 
  display: flex; 
  flex-flow: wrap; 
} 
.img { 
  width: 33.3333%; 
  padding-bottom: 30%; 
  background-size: cover; 
  background-position: center; 
}

<div class="gallery"> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2015/03/27/13/16/cat-694730__340.jpg)"></div> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2014/05/07/06/44/animal-339400__340.jpg)"></div> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2014/10/01/10/46/cat-468232__340.jpg)"></div> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2017/01/13/14/34/cat-1977416__340.jpg)"></div> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2017/01/13/22/10/cat-1978356__340.jpg)"></div> 
  <div class="img" style="background-image: url(https://cdn.pixabay.com/photo/2017/02/13/10/08/cat-2062223__340.jpg)"></div> 
</div>

То есть, размещать изображение как background в блоке с background-size: cover.