【CSS】レスポンシブimage_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

【CSS】レスポンシブimage_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:46 AM

元の画像: (幅 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

サイン: 道は長くて長い、私は上下に探します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。