--- slug: "cssでアスペクト比を固定するless" title: "CSSでアスペクト比を固定する(LESS)" description: "よくあるやつですが。いつも忘れてしまうので。" url: "https://www.ytyng.com/blog/cssでアスペクト比を固定するless" publish_date: "2017-06-18T14:07:59Z" created: "2017-06-18T14:07:59Z" updated: "2026-02-27T05:43:40.234Z" categories: ["css"] keywords: "" featured_image_url: "https://media.ytyng.com/resize/20230812/72f217281ec54adf8530e30e1897bd84.png.webp?width=768" has_video: false has_music: false video_urls: [] music_urls: [] lang: "ja" --- # 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>