@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*/
}
  • Вопрос задан
  • 48 просмотров
Пригласить эксперта
Ответы на вопрос 1
sharnirio
@sharnirio
Front-end developer
я обычно использую вот такой способ с сохранением пропорций в блоке
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 15:42
1000 руб./в час
27 окт. 2020, в 15:30
100000 руб./за проект
27 окт. 2020, в 15:28
100000 руб./за проект