Question

在网页上我有一个宽大的图像，它应该占据屏幕的正确50％。它看起来像我想要它，但它产生一个不需要的水平滚动条。我不希望图像缩小，我希望它保持完全一样，但不要生成水平滚动条。我怎么能这样做？

HTML：

<div class="image">
</div>

CSS：

.image {
    position:absolute;
    left:50%;
    background-image: url('Images/banneriPhone.png');
    width:774px;
    height:759px;
}

编辑：我有一些建议，我删除溢出选项。这不起作用，所以我改变了代码（将图像放在html中），但这仍然无效。这是CSSDesk链接：

http://cssdesk.com/mqZpC

Answer 1

在CSS中使用它来隐藏CSS类图像的滚动条：

.image {
    position:absolute;
    left:50%;
    background-image: url('Images/banneriPhone.png');
    width:774px;
    height:759px;
    overflow-x:hidden;
    overflow-y:hidden;
}

overflow-x将隐藏水平滚动条

overflow-y将隐藏垂直滚动条

编辑：您可以在此处看到溢出属性的一些示例：http://www.brunildo.org/test/Overflowxy2.html

Answer 2

要删除图像上的滚动条，我执行了以下操作，并且它起作用了。将以下内容添加到您的图像在CSS上的班级中：

overflow:hidden;

Answer 3

在元素上应用以下css规则：

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

并设置边距：

margin:0;

由于盒子大小规则，填充可以保持不变（填充不包含在图像的宽度中，可能设置为100％）。

从生成水平滚动条停止宽图像

3 个答案: