Почему не срабатывает object-fit: cover для изображения?
У меня есть такая html разметка:
<div class="cart_content__one"> <div class="cart_content__img"> <img src="/img/products_pictures/${item.img}"> </div> <div class="cart_content__name">${item.name}</div> <div class="cart_content__price">${item.price}</div> <div class="cart_content__quantity"> <div class="quantity_minus_plus"><button><i class="fa fa-minus" aria-hidden="true"></i></button></div> <div><span>${item.quantity}</span></div> <div class="quantity_minus_plus"><button><i class="fa fa-plus" aria-hidden="true"></i></button></div> </div> </div> |
<div class="cart_content__one"> <div class="cart_content__img"> <img src="/img/products_pictures/${item.img}"> </div> <div class="cart_content__name">${item.name}</div> <div class="cart_content__price">${item.price}</div> <div class="cart_content__quantity"> <div class="quantity_minus_plus"><button><i class="fa fa-minus" aria-hidden="true"></i></button></div> <div><span>${item.quantity}</span></div> <div class="quantity_minus_plus"><button><i class="fa fa-plus" aria-hidden="true"></i></button></div> </div> </div>
Пытаюсь картинки выровнять:
.cart_content__one { display: flex; padding: 12px; gap: 20px; align-items: center; } .cart_content__img { max-width: 16%; } .cart_content__img img { width: 100%; display: block; height: 100px; object-fit: cover; } |
.cart_content__one { display: flex; padding: 12px; gap: 20px; align-items: center; } .cart_content__img { max-width: 16%; } .cart_content__img img { width: 100%; display: block; height: 100px; object-fit: cover; }
Но почему-то не срабатывает. Если у картинки большая высота, то она все равно не обрезается
Дополнительно:
нужен пример в песочнице с воспроизведением проблемы
то срабатывает. А у меня нет
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема возникает из-за того, что свойство object-fit: cover не поддерживается в некоторых старых версиях браузеров, а также в Internet Explorer до версии 11. Если вы столкнулись с этой проблемой, вот несколько способов, как можно решить ее:
1. Проверьте поддержку свойства object-fit: cover в браузере, который вы используете. Если браузер не поддерживает данное свойство, вам придется использовать альтернативные методы.
2. Используйте фолбэк метод, например, можно использовать свойство background-size: cover для фона изображения вместо object-fit. Пример:
.image { background-image: url('image.jpg'); background-size: cover; background-position: center; height: 200px; }
3. Другой способ - обернуть изображение в контейнер и задать ему свойства overflow: hidden и position: relative, чтобы обрезать изображение по размерам контейнера. Пример:
<div class="image-container"> <img src="image.jpg" class="image" alt="Image"> </div><div class="image-container"> <img src="image.jpg" class="image" alt="Image"> </div>
.image-container { width: 200px; height: 200px; overflow: hidden; position: relative; } .image { width: 100%; height: 100%; object-fit: cover; }
4. Используйте JavaScript, чтобы динамически изменять размеры изображения в зависимости от его родительского контейнера. Этот способ более сложный, но может быть полезен в некоторых случаях.
Надеюсь, один из этих способов поможет вам решить проблему с object-fit: cover для изображения. Если у вас остались вопросы, не стесняйтесь задавать их.