Как правильно реализовать верстку с изображениями разного размера?

Question

[user_tm]

Всем привет, подскажите пожалуйста как должна быть правильно реализована работа с изображениями. Есть сайт на WP, где на странице товара есть область куда пользователь вставляет через админку фотографию. Фотографии по размеру все разные и из-за этого область в зависимости от фота по размеру тоже разная, я конечно могу за фиксировать область прописав ей определенную высоту и ширину, но тогда фотографии искажаются, ведь не все фото будут по размеру подходить под установленную область. Или должен ли мне заказчик предоставить все фото одинакового размера?
Еще пробовал использовать свойства object-fit с разными значениями, но почему то это не работает картинка просто растягивается на всю страницу.

/*Это область (контейнер или родитель) не обращай те внимание на название класса раньше там был слайдер*/
#mainSlider .tops .product-slider {
  width: 70%;
  height: 433px;

  
}
/*это фото или дочерний элемент*/
#mainSlider .tops .product-slider img {
  object-fit: cover !important;
  -o-object-fit: cover !important;
  object-fit: cover !important;

/*не работает да не смотря на префексы и !important*/
}

Comments

[Антон]

А вы подробнее про object-fit почитайте и поймете, почему не работает

[Ankhena]

Или должен ли мне заказчик предоставить все фото одинакового размера?

Хорошо бы.
Если заказчик хочет ровный красивый сайт, то изображения для него специально подбирают и подготавливают.

я конечно могу за фиксировать область прописав ей определенную высоту и ширину

Да, так и поступают.

Еще пробовал использовать свойства object-fit с разными значениями, но почему то это не работает картинка просто растягивается на всю страницу.

Потому что вы не задали ей размеры.

/*не работает да не смотря на префексы и !important*/

-o-object-fit Вы смотрите в 12 опере? Ну-ну.
Для префиксов используйте autoprefixer при сборке.

important нужен с единственной целью - переопределять стили js плагинов, код которых вам не принадлежит.
В собственной верстке никаких important быть не должно.

Answer 1

[Vyach Gor]

я обычно использую вот такой способ с сохранением пропорций в блоке