Question

我有几张图片，而且它们都有很大的空白。我必须使它们大于小屏幕中的视口宽度，以使其具有客户端所需的尺寸，但这会产生空的溢出。我似乎无法隐藏图像的溢出。这是图像的代码及其容器：

HTML：

repositories

CSS：

<div class="product">
    <img alt="floor" id="img-product">
</div>

我还在＃img-product中使用过：width：500px;

Answer 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>

请注意，出于演示目的，我必须在img中添加src属性，因为content属性在此处不执行任何操作，而.product的高度不起作用，否则它将崩溃。

隐藏宽度大于正文宽度的图像溢出

1 个答案: