Question

我在主页上有一张图片。它的宽高比是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;
}

Answer 1

我想你希望你的图像成为网站的背景。然后从DOM中删除它，并为正文样式添加background属性。要定义图像的大小，请使用background-size属性。请参阅this fiddle - 它显示了background-size属性的包含和封面值之间的区别。

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

修改：
以下是与您的标记一起包装的相同解决方案：http://jsfiddle.net/A3uKs/

Answer 2

在没有任何代码示例的情况下很难理解您的需求，因此请务必在下次添加它们。

无论如何，请确保有一个容器包装所有内容/图片，让我们给它标识cont。

现在，在css中，声明：

#cont{overflow:hidden;}

希望有所帮助。

使用css维护视口大小

2 个答案: