ホームページ > 記事 > ウェブフロントエンド > 【CSS】レスポンシブimage_html/css_WEB-ITnose
【CSS】レスポンシブimage_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:46:201332ブラウズ
元の画像: (幅 1680px、高さ 1050px)
しかし、通常ウェブサイトを作成する場合、
現時点では、レスポンシブ テクノロジを使用して解決できます:
レスポンシブ画像とは、ブラウザ画面ウィンドウのサイズが異なる場合を意味します。ウィンドウサイズが変化しても、画像が切れたり、水平スクロールバーが表示されたりすることはありません。
HTMLコード:<body> <img src="1.jpg" alt=””/></body> </p>
<p></p> <p>CSSコード: </p> <pre name="code" class="sycode">img{ width: 100%; /*设定为百分比那就OK*/ max-width: 100%; /*为了保证图片不被拉伸，可加上此CSS属性*/ } 効果:
上記の例はimgタグを挿入した場合ですが、背景画像をどうするか？
HTML コード:
<body> <div class="backgroundImgShow"> <p class="text">12111111111111111444444444444444444444444444445555555555555</p> </div></body>
CSS コード:
body,div,p{ margin: 0; padding: 0; }.backgroundImgShow { background: url(1.jpg) no-repeat 50% 50%; }.text{ color: white; word-wrap: break-word; font-size: 30px; } 一般に、次の図に示すように、コンテンツの高さが背景画像の高さより小さい場合、背景画像を完全に表示することはできません。 この時点で、コンテンツ領域に背景画像と同じ高さを設定することを考えるかもしれません。たとえば、私のサンプル画像は 1680px*1050px である場合、CSS の高さの値を 1050px に設定できます。この方法では、背景画像を比例的に拡大縮小できますが、図に示すように、画像にはブラウザの上部から 1050 ピクセルの空白の高さがあります。
この時点で、高さを削除し、 CSS コードは次のとおりです:
rrree 効果は次のとおりです:
これを見ることができます。画像にはまだ少し白いエッジがあり、テキストは画像の中に完全には入りません。さらに最適化することができます。background-size: 100%; を
background-size: cover;に変更します。画像はコンテナ全体に表示され、比例して拡大縮小されます。レンダリング:
ただし、padding-top:62.%; が上で設定されているため、テキストの上のマージンが大きくなります。マージンをキャンセルするには、margin-top:-62.5%; を設定します。最終画像:
最終 CSS コード:
body,div,p{ margin: 0; padding: 0; } .backgroundImgShow { background: url(1.jpg) no-repeat 50% 50%; <strong><span style="color:#ff0000;"> -webkit-background-size: 100%; background-size: 100%; height: 1050px;</span></strong> } .text{ color: red; word-wrap: break-word; font-size: 30px; } 注: レスポンシブなメソッドを使用すると、画像はさまざまなサイズの画面で均等に拡大縮小できますが、大きな画像 (高解像度) は、より大きな画像には適していません。小さな画面 (携帯電話など) で読み込みや閲覧を行う場合、WiFi がある場合は読み込み速度に大きな違いはありませんが、WiFi がないとこのような大きな画像を読み込むのは非常に困難です。現時点では、メディア クエリを使用し、大きな画像の代わりに小さな (解像度の低い) 画像を使用することができます。これにより、読み込みが速くなり、ユーザー エクスペリエンスが向上します。
作者: Zhizhi
サイン: 道は長くて長い、私は上下に探します。