-1

我在主页上有一张图片。它的纵横比是 16:9。因此，只要将高度设置为 100%，非宽显示器上的宽度就会超过常规视口宽度。在这种情况下，有没有办法不让水平滚动条出现？请帮忙。我只想使用一些 css 属性隐藏这些额外的图像部分。 HTML

    <html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div>
<img src="test.jpg"/>
<div id="ht">
<p>I'm red</p>
</div>
</div>
<script type="text/javascript" src="JavaScript.js"></script>
</body>
</html>

CSS

body {
margin: 0;
}
#nav {
 list-style-type: none;
 margin: 0;
 padding: 0;
 }
#nav li {
 width: 20%;
 float: left;
 text-align: center;
 }
#nav li a {
 line-height: 400%;
 display: block;
 text-decoration: none;
 font-weight: bold;
 color: #F2F2F2;
 -webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
 box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
 }
#nav a:link, #nav a:visited {
 background-color: #071726;
 }
 #nav a:hover, #nav a:active, #nav a:focus {
 background-color: #326773;
 }
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
height: 100%;
overflow: hidden;
}
#ht {
position: relative;
top: 100px;
left: 45px;
}
#container {
overflow: hidden;
}
4

2 回答 2

1

我猜你希望你的图片成为网站的背景。然后从 DOM 中删除它并background为 body 样式添加一个属性。要定义图像的大小，请使用background-size属性。看到这个小提琴- 它显示了属性的包含值和覆盖值之间的区别background-size。

body {
    background: url(test.jpg) no-repeat scroll center center;
    background-size: cover;
    /* OR */
    background-size: contain;
}

编辑：
这是用您的标记包装的相同解决方案：http: //jsfiddle.net/A3uKs/

于 2013-10-22T08:33:14.050 回答
0

it's quite difficult to understand what you need without any code samples, so- please be sure to add them next time.

anyway, make sure there's a container wrapping all of the content/images, let's give it the id cont.

now, in css, declare:

#cont{overflow:hidden;}

hope that helps.

于 2013-10-22T08:23:30.170 回答