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

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

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

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

HTML:

<div class='box'>    <img src="..."></div>

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

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;}