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

Answer 2

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

overflow:hidden;

Answer 3

对元素应用以下 css 规则：

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

并设置您的边距：

margin:0;

由于 box-sizing 规则，内边距可以保持不变（内边距不包括在图像的宽度中，可能设置为 100%）。