CSS 画像レスポンシブ垂直方向および水平方向のセンタリング_JavaScript スキル

最近 Weibo で CSS 中心技術が流行っているようですが、いくつかの資料を読んだのですが、どれもあまり良いものではなかったので、時間をかけて関連資料を統合しました。具体的な内容は次のとおりです。

ここをクリックソースコードをダウンロード

エフェクト表示:

要件:

1. できるだけ多くのブラウザに対応します。ie6 が max-* をサポートしていない場合は考慮されません。

2. ブラウザのサイズが変更されると、画像は常に比例して拡大または縮小されます。

3. 画像をラップする div も応答性があり、各 div のサイズは同じです。

4. 画像は常に水平方向と垂直方向の中央に配置されます。

5. 画像の行数と列数は変わりません。ここでは常に 3*3 です。

要件を一つずつ満たしていきましょう。

要件 1 を満たすということは、

をセンタリングするために高度なブラウザで一般的に使用される属性など、高度なブラウザでのみ使用できる属性を使用しないようにする必要があることを意味します。

display:table-cell;vertical-align;center;
flexbox
transform

。 。 。

これらの属性を使用する必要がある場合は、以前のバージョンのブラウザと互換性のある代替手段が必要です。

要件 2 の画像の比例的な伸縮と拡大縮小は、レスポンシブ デザインで簡単に実現できます。

画像 img{max-width: 100%;} を直接変更するだけです。外幅を画像の幅よりも小さいサイズに設定しても、画像は外の div を埋めることになり、このときの画像の高さは比例して計算されます。

画像サイズが 640*480(4:3)、外側の div が 300px に設定され、画像サイズが 300*225(4:3) になっていることがわかります。

次に、要件 2 にブラウザのサイズ変更があります。これも簡単で、外側の div の幅を 100% に書き込むだけです。

外側の div のサイズがどんなに変化しても、画像のアスペクト比は決して変わらないことがわかります。

次に要件 3 があり、外側の div は応答します。

最初の反応は、サイズを 100% に設定することです。たとえば、上のエフェクトでは、1 行に 3 つの画像があります。画像をラップする各 div の幅を 33.3% に設定すると、div は内部の画像に比例して拡大縮小または伸縮され、div の高さは不均一になります。

<div id='wrap'>
  <ul>
   <li>
    <p><img src="1.jpg"></p>
   </li>
      .....
  </ul>
 </div>

*{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  display:inline-block;
  vertical-align: middle;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

最初の画像の幅が高さより小さいため、最初の画像の高さが 200px を超えていることがわかります。明らかに、この時点では高さをベンチマークとして使用し、幅を拡大縮小する必要があります。比例的に。画像の親要素に overflow:hidden; を追加すると、豚の足が見えなくなります。

では、外側の div をレスポンシブにするにはどうすればよいでしょうか?

パディングトップ:100%;

<div id='wrap'>
  <ul>
   <li>
    <div class="dummy"></div>
   </li>
      ...
  </ul>
 </div>
 
 *{
  margin: 0;
  padding:0;
 }
 li{
  list-style-type: none;
  float: left;
  display: block;
  max-width: 200px;
  width: 32%;
  border:1px solid red;
 }
 .dummy{
  padding-top: 100%;
 }
 #wrap{
  max-width: 620px;
  font-size: 0;
 }

ここでのアスペクト比は 1:1 です。アスペクト比が 4:3 の場合は、padding-top: 75%; に設定します。その他も同様です。

要件 3 が完了し、次が要件 4 になります。

最初に写真を入れてください。

このとき、画像はドキュメントフローから分離され、画像全体が展開されます。

 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border: 2px solid blue;
 }

同時に、パッケージイメージ divposition:relative;

を配置します。

上の画像の margin: 0 auto; は水平方向に中央揃えにできることに注意してください。

以下に残っているのは、画像を垂直方向に中央に配置することだけです。要件 5 では、行の列数を設定するために最も外側の div に max-width を設定するだけです。

垂直方向のセンタリングにはさまざまな方法がありますが、ここでは画像のposition:absolute;、margin:auto;padding:auto;を設定して、文書の流れからはみ出た画像を水平方向と垂直方向にセンタリングすることが考えられやすいです。 CSS での絶対的な水平方向と垂直方向のセンタリングを参照してください。

しかし、この方法はie7では無効です。したがって、画像の外側に div のレイヤーを追加するだけで済みます。

ここでは、非常に一般的な垂直方向のセンタリング方法を使用します。

 <li>
    <div class="dummy"></div>
    <p><img src="1.jpg"><i></i></p>
   </li>
 img{
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  vertical-align: middle;
 }
 i{
  display: inline-block;
  vertical-align: middle;
  height:100%;
 }

この時点では

タグを height:100% に設定する必要があることに注意してください。そうしないと、IE7 では タグが外部タグと同じ高さに達することができなくなります。容器。

上記の内容は、CSS 画像の垂直方向および水平方向のセンタリングに関するこの記事のすべての内容です。気に入っていただければ幸いです。