-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

0

コードサンプルがないと何が必要かを理解するのはかなり難しいので、次回は必ず追加してください。

とにかく、すべてのコンテンツ/画像をラップするコンテナがあることを確認してください。それに id を付けましょうcont。

ここで、css で次のように宣言します。

#cont{overflow:hidden;}

それが役立つことを願っています。

于 2013-10-22T08:23:30.170 に答える