object-fitを使って長方形の画像を正方形に表示させていきます
今回使用する画像
横:270px 縦:404px
の長方形の画像をCSSで正方形にします(‘ω’)
See the Pen Untitled by yu-shi (@webpara) on CodePen.
とりあえずhtmlに画像挿入のコードを記述しました。
objectというdivの中に画像を挿入しました。
まだ何もcssは当ててないです。
See the Pen Untitled by yu-shi (@webpara) on CodePen.
そしてこれが正方形にするためのCSSを当てた感じです。
丸っとコピーしちゃえばOKです。
ここからはちょっとした css の解説です。
.object{
display: inline-block;
position: relative;
width: 100%;
max-width: 270px;
}
.object::before{
content: "";
display: block;
padding-top: 100%;
}・上からdisplay:inline-block; 場面でつけたりつけなかったりです(‘ω’)
・position:relative; この後作るpadding-topの中に入れるためです。
・width,max-width 場面で数値かわります。今回は元画像のサイズより大きくせずにレスポンシブ対応したかったのでこんな感じです。
・content:””; 今回は疑似要素に入れる内容何もない為
・display:block; これがないと表示されません
・padding-top:100%; この値が画像が見える範囲になります。70％とかにすれば横10縦7の比率の画像表示になります。
.object img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
object-position: 0 0;
}・position:absolute; 親要素にrelativeをかけたので、これでtopとleftの指定した位置に画像が表示されます
・width:100%,height:100%; これがないと画像が親要素からはみ出します。
・top:0; left:0; 位置の指定です
object-fit: cover;これが縦横の比率を保ったまま画像を表示させる命令です(‘ω’)
object-fit: cover; がないと縦横の比率がおかしくなりつぶれたような画像になります。
object-positonの説明です。画像の★ の位置が画像を表示させる起点になります。
object-positon ：0 0；なら左上が起点、100％ 100%なら右下が起点
autoか指定なしなら真ん中が起点になります。
こんなことせずに普通に正方形の画像差し込めばよくない( ˘•ω•˘ )となるかもしれないですが、、
例えばPCでは長方形、でもスマホでは正方形で表示したいという時に@mediaスマホサイズの
中にだけcss記入すると画像を長方形と正方形二つ用意しなくていいので便利ですよね(*’ω’*)