CSS 画像の応答性 + 垂直および水平センタリング_html/css_WEB-ITnose

効果

要件:

1. できるだけ多くのブラウザと互換性があること。ie6 が max-* をサポートしていない場合は考慮されません。

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

3. 画像をラップする div もレスポンシブで、各 div のサイズは同じです。

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

5. ここでは、画像の行数と列数は変わりません

要件を 1 つずつ満たしていきます。

要件 1 を満たすということは、高度なブラウザーでのみセンタリングによく使用される属性など、高度なブラウザーでのみ使用できる属性を使用しないようにする必要があることを意味します

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

flexbox

変身

。 。 。

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

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 をレスポンシブにするにはどうすればよいでしょうか?

padding-top: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;    }

アスペクト比が 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; を配置すると、水平方向に中央揃えにできることに注意してください。

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

垂直方向のセンタリングにはさまざまな方法がありますが、ここでは画像の位置:absolute; を設定して、ドキュメントフローからはみ出した画像を水平方向と垂直方向にセンタリングすることが簡単に考えられます。 「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 では ラベルが高さに到達できなくなります。外部コンテナと同じ高さ。

最後にダウンロードを添付します