css_html/css_WEB-ITnose で画像の高さと幅が同じになるように設定します。

カテゴリー: フロントエンドテクノロジー | タグ: CSS | リリース時間: 2016-01-11 13:30:00

画像の長さと幅が等しくない場合、長さと幅を設定したいjsで設定し、リサイズを聞いてリアルタイムに更新することもできますが、この方法は面倒です。

ここでは CSS を使用して目的の効果を実現します:

HTML:

目的を達成するには親要素を追加する必要があります。

CSS:

.box { position: relative; width: 50%; /* desired width */}.box:before { content: ""; display: block; padding-top: 100%; /* initial ratio of 1:1*/}

ここで疑似要素を定義し、そのpadding-topを100%に設定します。これは、ここでのpadding-topが要素の幅に相対的なためです。

.box 要素を定義したので、その長さと幅は等しいので、あとは img の CSS を設定するだけです:

.box img { position: absolute; top: 0; left: 0; bottom: 0; right: 0;}