正方形の中に異なったサイズの画像を収める＜レスポンシブ対応CSS＞

楽天やヤフーショッピングのゴールドやトリプルやランキングページを作成するときに同じサイズの正方形の中に異なったサイズの画像を収めたい場合があります。

そんな時に使えるCSS。

.square_layer{
width: 30vw;
height: 30vw;
margin: 0 auto;
background: #EFEFEF;
}
.square_layer img{
max-width: 100%;
max-height: 30vw;
}

.square_layer{

width: 30vw;

height: 30vw;

margin: 0 auto;

background: #EFEFEF;

}

.square_layer img{

max-width: 100%;

max-height: 30vw;

}

高さ、幅を決めた骨組みにイメージを入れます、イメージは骨組みに収めるように「max-width」、「max-height」で指定します。

高さ、幅、マージンは適時変更してください。