停止生成水平滚动条的广泛图像

在网页上我有一个广泛的图像，它应占据屏幕右侧的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

来源

2013-05-04 Andrew

使用这个在你的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将隐藏垂直滚动条

编辑：在这里你可以看到overflow属性的一些例子：http://www.brunildo.org/test/Overflowxy2.html

来源

2013-05-04 12:06:32 DominikAngerer

这没有奏效。滚动条仍然不幸。 – Andrew 2013-05-04 12:34:10

围绕这个div有一个div，最大宽度大于图像div的774px？ – DominikAngerer 2013-05-04 13:02:30

我用这个CSS做了一个原型 - 在我的例子中没有滚动条 - 你有什么样的例子可以看到它吗？（不是在CSSdesk中，因为它只在你的Session中，当你在那里做某件事时 - 在CSSDesk中有时也存在这个问题） – DominikAngerer 2013-05-04 13:22:58

应用的元素下面的CSS规则：

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

并设置页边距：

margin:0;

的垫衬可以保留完整，因为盒子大小规则（填充不包括在图像的宽度中，可能设置为100％）。

来源

2013-06-28 16:26:21 hvdd

停止生成水平滚动条的广泛图像

回答

相关问题