CSS3 の背景サイズ (レスポンシブ画像の等倍)_html/css_WEB-ITnose

background-size の基本属性

background-size: この属性は CSS3 にあり、モバイル側のさまざまな場所で使用されます。たとえば、以前のプロジェクトではカルーセル画像を使用していましたが、この方法では、さまざまなサイズと解像度の画像に適応させるために、CSS3 でメディア クエリを使用する必要がありました。問題は解決できますが、この解決策はあまり優れたものではなく、非常に面倒です。もちろん、幅 (幅): 100%、高さ (高さ) などのパーセンテージを直接使用して画像のサイズを設定することも考えられました。 : 100%; ただし、画像の高さを 100 % に設定しても効果はなく、特定の高さの値が設定されておらず、ブラウザにはレンダリング時に高さが設定されていないため、画像は表示されません。今回は、CSS3 でメディア クエリを使用して、異なる解像度を均等にスケーリングすることにしました。

ブラウザのサポート: IE9+、Firefox4+、opera、chrome、safari5+;

基本的な構文: この属性値は、背景画像の幅と高さを設定します。最初の値は幅、2 番目の値は高さです。最初の値のみが設定されている場合、2 番目の値は自動的に「auto」に変換されます。 2: パーセント

この属性は、画像の幅と高さを親要素のパーセンテージとして設定します。値は幅、2 番目の値は高さです。 1 つの値だけを設定した場合、2 番目の値は「auto」に設定されます。

3: cover

背景画像が背景領域を完全に覆うように、背景画像を十分な大きさまで展開します。

4: contains

幅と高さがコンテンツ領域に完全に収まるように、画像を最大サイズまで拡大します。

固定幅400px、高さ200pxに設定後の画像

1 <div class="bsize1"></div>

1 .bsize1 {2      width:400px;3      height:200px;4      background: url("1.jpg") no-repeat;5      border:1px solid red;6      overflow: hidden;7   }

固定幅400px、高さ200px - 背景サイズ:400ピクセル 200ピクセルのスケーリング設定を使用するか、背景サイズを使用してください: 100% 100% スケーリング設定

1 <div class="bsize1 bsize3"></div>

1 .bsize3 {2          background-size: 400px;3         /*background-size:100% 100%;*/4  }    

固定幅 400px、高さ 200px - 背景サイズ: 100% スケーリング設定を使用

1 <div class="bsize1 bsize5"></div>

属性を使用背景画像を設定するカバー

1 .bsize5 {2          background-size: 100%;3   }

1 <div class="bsize1 cover"></div>

背景画像を設定するには、contain 属性を使用します

.cover {        background-size:cover; }

<div class="bsize1 contain"></div>

適応性の高い画像の width 属性を 100% に設定します

背景画像が使用されていない場合など、画像の設定プロパティの width = 100%、その高さは適応されます。次の HTML コード:

.contain {        background-size:contain;  }

画像適応の問題を解決する別の方法を使用します - 画像適応の問題

画像の幅を 100% に設定します ページが読み込まれるときに高さが折りたたまれる問題が発生します。適応性を実現するパーセンテージ値を設定するには、padding -top を使用します。padding-top = (画像の高さ/画像の幅)*100;背景画像

実装の基本原則:

要素のアスペクト比を維持する手法を使用し、垂直方向のパディングトップ値をパーセンテージの形式で要素に追加します。この値は、要素の幅に相対的です。上の画像の幅は 1024 ピクセル、高さは 316 ピクセルなどの要素です。その場合、現在の

padding-top = (高さ / 幅) * 100% = (316 / 1024) * 100% =

ただし、画像の高さと幅をスケーリングするだけでは不十分です。この属性を要素の背景に適用するには、background-size:cover も追加する必要があります。ただし、IE8 以下ではこの属性がサポートされていません。 IE 下のブラウザと互換性があるため、ドアには別の属性 background-position: center を追加する必要もあります。同時に、ドアは画像の幅が親コンテナの幅以下であることを確認する必要もあります。

したがって、次の HTML コードは次のようになります:

<div class="bsize-padding"><img src="3.jpg" width="100%"/></div>

<p>可以使用padding－top来设置百分比值来实现自适应 padding-top = (图片的高度/图片的宽度)*100</p><div class="cover-paddingTop">      <img src="5.jpg"/></div>