Скрыть переполнение изображения с шириной больше, чем тело
У меня есть несколько изображений, и все они имеют очень большое пустое поле. Я должен сделать их больше, чем ширина области просмотра на маленьких экранах, чтобы они имели размер, который хочет клиент, но это приводит к пустому переполнению. Кажется, я не могу скрыть переливы изображения. Вот код изображения и его контейнера:
HTML:
<div class = "product">
<img alt = "floor" id = "img-product">
</div>
CSS:
.product {
display: flex;
justify-content: center;
align-items: center;
width:100%;
overflow: hidden;
}
#img-product{
width: 150vw;
position: absolute;
content: url("image.png");
}
Я также использовал в # img-product: width: 500px;
Я загружу изображение через несколько минут, но вы правы. Поля слева и справа и изображение по центру
Ответы 1
Проблема в том, что img позиционируется абсолютно по отношению ко всему HTML-документу, поэтому родительский .product не имеет над ним власти.
Решение: расположите .product так, чтобы расположение img было относительно .product.
.product {
display: flex;
justify-content: center;
align-items: center;
width:100%; /* for demonstration purposes */
height:100px;
overflow: hidden;
position:relative; /* new */
}
#img-product{
width: 150vw;
position: absolute;
content: url("image.png"); /* note: this doesn't do anything. */
}<div class = "product">
<img alt = "floor" id = "img-product" src = "https://placehold.it/640x100">
</div>Обратите внимание, что мне пришлось добавить атрибут src в img для демонстрационных целей, поскольку свойство content здесь ничего не делает, а также высоту для .product, иначе он рухнет.
Не могли бы вы добавить сюда пример изображения и целевой результат (изображение с белыми полями по центру экрана, так что эти поля выходят за пределы экрана, правильно?)