html - 阻止宽图像产生水平滚动条

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