Как задать одинаковый размер блоков с картинками?

Question

[viktorross]

Здравствуйте, подскажите кто-нибудь как выполнить задачу, есть блоки с картинками, картинки разных размеров по высоте, соответственно и блоки получаются разными по высоте, сжимать width:200px;height:200px; нет смысла т.к портится картинка, как показать только центр картинки в блоке, чтобы все стало одинаковым?
например так

Answer 1

[Анатолий Жаров]

.image {
  width: 30%;
  background-image: url(https://pp.userapi.com/c824201/v824201969/173426/YW0DIgHPsvw.jpg?ava=1);
  background-size: cover;
  background-position: center;
}

.image:after {
  content: ' ';
  display: block;
  padding-top: 100%;
}

.images-container {
  display: flex;
}

Comments

[Nikita-Fast]

а если картинка вертикальная ?

[Анатолий Жаров]

Nikita-Fast, да в общем то все равно, background-size: cover; будет заполнять картинкой блок

[Nikita-Fast]

Анатолий Жаров, видишь какая штука .... ориентация картинки то может быть разная , да и объект на картинке может быть в любом месте, да и картинку лучше выставлять тегомimgно вот прикол в том как на фронте понять что картинка : вертикальная/горизонтальная/квадратная ?

[Анатолий Жаров]

Nikita-Fast, никак. Это единственное адекватное по соотношению сложность\профит решение

[Сергей delphinpro]

Nikita-Fast,

да и объект на картинке может быть в любом месте,

при такой постановке вопроса вам нужен ИИ. Или контент-менеджер для заливки данных на сайт.

[Nikita-Fast]

Сергей delphinpro, что такое ИИ ?

[Сергей delphinpro]

Nikita-Fast, Искусственный Интеллект =)

[Анатолий Жаров]

Nikita-Fast, вру, есть еще организационное решение) лицу, ответственному за наполнение картинками строго настрого наказать резать картинки до одинакового размера\пропорций с объектом точно по центру

[Nikita-Fast]

Анатолий Жаров, Сергей delphinpro, ну так то да .... геморой в общем

Answer 2

[deight]

https://css-tricks.com/almanac/properties/o/object-fit/