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

Posted by: ytyng 3 years 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

  • 大坂昌彦

    大坂昌彦 @masahiko_osaka

    ytyng

    ついに犯人がわかってしまいました！ ナル、一昨日にも僕だったので、昨日の人しかいません！！ ペダルにガムテープ貼っても良いけど、剥がして帰って欲しい。散々、自分の足で踏みつけたガムテープを何で次の人が剥がさなきゃならないの？？自分… https://t.co/Contz66ZK9
    1 week ago

  • ytyng

    ytyng @ytyng

    Shopify の在庫数更新API GraphQLの場合: 一括更新できる 絶対値更新できない REST API の場合: 一括更新できない 絶対値更新できる なんなのそれ https://t.co/0QyibNQXdt
    3 weeks, 2 days ago

  • ytyng

    ytyng @ytyng

    #bulma スペーシングヘルパー、マージされてる! もうこれBootstrapじゃん https://t.co/uI8fZ6lAOw
    3 weeks, 2 days ago

Recent Posts

Archive

2020
2019
2018
2017
2016
2015
2014
2013
2012
2011

Categories

Authors

Feeds

RSS / Atom