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

投稿者: ytyng 1 年, 4 ヶ月 前

(コメント)

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

.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 週間 前

最近の投稿

アーカイブ

2018
2017
2016
2015
2014
2013
2012
2011

カテゴリー

著者

フィード

RSS / Atom