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>

現在未評価

コメント

最近のツイート

  • ytyng

    ytyng @ytyng

    俺もスタバアプリにログインできないよ
    1 ヶ月, 1 週間 前

  • 安藤拓郎 Takuro Ando

    安藤拓郎 Takuro Ando @takuroando

    ytyng

    これまでいろんなグッズを作ってきたけど、今回は「お米」と聞いて買うしかないなと。今夜の夕食はコシヒカリ!箸もセットだし^^ https://t.co/01ucQx9qtw #腰乃展 #マンガ展 https://t.co/4VL2vOe0Og
    1 ヶ月, 3 週間 前

  • ytyng

    ytyng @ytyng

    講談社さんとやった全部入り電子書籍セットがギネスブックに登録されたよー https://t.co/rbkd3IYub0
    1 ヶ月, 3 週間 前