ホームページ > 記事 > ウェブフロントエンド > スクロール バーは表示されず、画像は自動的に screen_html/css_WEB-ITnose に合わせて拡大縮小されます。
スクロール バーは表示されず、画像は自動的に screen_html/css_WEB-ITnose に合わせて拡大縮小されます。
- WBOYオリジナル
- 2016-06-21 08:58:071121ブラウズ
ディスカッションへの返信 (解決策)
style="width:100%" は、画像の外側に他のオブジェクトがあるかどうかに注意する必要があります。通常、js を使用して計算されます。
いくつかのソリューションがあり、それぞれが異なるシナリオに適しています。
1. 背景画像。
background-image:url();background-size:100% 100%;
この欠点は、IE ブラウザの以前のバージョンと互換性がないことです。
2. 絶対配置、js が幅と高さを計算します。
#a{position:absolute:top:0;left:0};
function getSize() { var winWidth = 0, winHeight = 0; if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口高度 if (window.innerHeight) winHeight = window.innerHeight; else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight; if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientHeight; winWidth = document.documentElement.clientWidth; } return { w : winWidth, h : winHeight };}var size = getSize();document.getElementById('a').width = size.w + 'px'; document.getElementById('a').heigth = size.h + 'px'; img{width:100%}
個人使用: 最大幅：100％、このスタイル。この利点は、画像が画面幅より小さい場合、拡大されず、画面を超えた場合でも変形せずに画面サイズに合わせて自動的に調整されることです。
コードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">body,html{ margin:0px; height:100%;}</style></head><body> <div class="autoHeight"><img src="5398780_094651038992_2.jpg" style="max-width:100%; max-height:100%;" /></div></body></html> 私の提案する方法:
画像が画像処理のみの場合: CSS ステートメントを記述し、画像の幅を auto に設定し、段落を記述することで高さを設定する js イベントはブラウザー ウィンドウの高さを読み取り、ページが読み込まれるときにそれを img に追加します。その後、ページを開いたときに上下のスクロール バーはまったく表示されませんが、規則的ではありません。左右に空白があることがわかります。
画像がバックグラウンド処理として使用される場合: ページのロード時に js イベントを記述することで、div、width: 100%、overflow: hidden を宣言する CSS ステートメントを記述し、ブラウザー ウィンドウの高さが読み取られます。 div に追加すると、ページを開いたときに、上下左右のスクロール バーがまったく表示されません。