CSSでアスペクト比を固定する(LESS)

(コメント)

よくあるやつですが。いつも忘れてしまうので。

.aspect-ratio(@ratio) {
position: relative;
&:before {
content: "";
display: block;
padding-top: @ratio;
}
> .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
}

.aspect-ratio(@width, @height) {
.aspect-ratio(@height / @width * 100%);
}

.pickup-article-image-box {
.aspect-ratio(16, 9);

img {
// object-fit: contain; // アスペクトフィット
object-fit: cover; // アスペクトフィル
}
}

 <div class="pickup-article-image-box">
<img class="unveil content" data-src="{{ post.image_url }}" />
</div>

現在未評価

コメント

最近のツイート

  • 漫画全巻ドットコム@ポイント最大15倍!

    漫画全巻ドットコム@ポイント最大15倍! @mangazenkan

    ytyng

    おはようございます!さぁ、いよいよ始まります!加藤浩次さん司会のがっちりマンデー!!が、はじまります!みなさん、うちの濱田、ダンディーが、映ります! https://t.co/YQj2zxafqe
    3 週間, 1 日 前

  • ytyng

    ytyng @ytyng

    漫画全巻ドットコム またテレビ出ます! がっちりマンデー。日曜日放送です。サーバ増やして待ってます! @mangazenkan https://t.co/cFVryVA7kG https://t.co/ia5rUMIIfw
    4 週間 前

  • ytyng

    ytyng @ytyng

    やばい、機能がリリースされない! タイムゾーンか? サマータイム設定になってるのか? とか焦ってたら、リリース日になってなかっただけだった。今日月末じゃん。月初じゃないじゃん。1人で焦ってたけど結果1日得した気分
    2 ヶ月, 3 週間 前