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

Posted by: ytyng 3 years, 7 months ago

(Comments)

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

.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>

Currently unrated

Comments

Recent Tweets

  • ytyng

    ytyng @ytyng

    apple developer の、テスト用デバイスのUDIDを1年ごとにチェックして、古い端末を消しちゃうやつ チェックボックスを入れたのを残すのか、消すのかの判断まちがって、全部のUDID消えたわ
    4 months, 1 week ago

  • ytyng

    ytyng @ytyng

    うちの会社 TORICO の 代表が今TV出てます #漫画全巻ドットコム #激レアさんを連れてきた
    4 months, 2 weeks ago

  • ytyng

    ytyng @ytyng

    Proofpoint にブロックされているIPアドレスからでも icloud など Apple メールアドレスにメール送信されてもブロックされてない…?
    5 months, 1 week ago

Recent Posts

Archive

2021
2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom