フルスクリーンの背景画像を使用する Web サイトで、画像の上部と下部が切り取られるという問題が発生しています。最初は padding: 0px と margin: 0px プロパティ (CSS で html、body に設定) が原因だと思っていましたが、これらを削除しようとしましたが無駄でした。このレイアウトは他の場所から借用したものであることに注意してください。背景画像を回転させる、スタイリングのない別の .js ファイルがあります。
CSS のどの部分に問題があり、使用している画像に関係なく、画像全体が常に表示されるように調整するにはどうすればよいですか?
このレイアウトのレスポンシブ デザイン ポインターのボーナス ポイント :-)
関連する HTML:
<html>
<body>
<div id="main_wrapper">
<div id="fullscreen">
<div id="backgroundImage">
<div style="visibility: visible; opacity: 1;" id="homebg">
<table cellpadding="0" cellspacing="0">
<tbody><tr>
<td>
<img src="images/bg.jpg">
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div>
</body>
</html>
関連する CSS:
html, body { margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
#main_wrapper { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; text-align: left; z-index: 0; }
#backgroundImage,
#backgroundImage table,
#backgroundImage td {height: 100%; overflow: hidden; width: 100%;}
#backgroundImage {position:relative;}
#fullscreen {
position:fixed;
width:100%;
height:100%;
z-index:-200;
}
#backgroundImage div {
height: 200%;
left: -50%;
position: absolute;
top: -50%;
width: 200%;
z-index: -200;
}
#backgroundImage td {
text-align: center;
vertical-align: middle;
}
#backgroundImage img {
margin: 0 auto;
min-height: 50%;
min-width: 50%;
-ms-interpolation-mode: bicubic;
}