@mixin aspect-ratio のサンプル

HTML

<div class="sample-16-9">
  16:9<br>
  @include aspect-ratio(16, 9);
</div>

<hr>

<div class="sample-16-9-400">
  16:9<br>
  @include aspect-ratio(16, 9, 400);<br>
  max-width: 400px;
</div>

<hr>

<div class="content">
  <div class="sample-16-9">16:9</div>
  <div class="sample-16-9">16:9</div>
  <div class="sample-16-9">16:9</div>
</div>

<hr>

<div class="content">
  <div class="sample-4-3">4:3</div>
  <div class="sample-4-3">4:3</div>
  <div class="sample-4-3">4:3</div>
</div>

<hr>

<div class="sample-16-9-400">
  <img src="sample.jpg">
</div>

SCSS

@mixin aspect-ratio($width, $height, $max-width: none) {
  position: relative;
  @if ($max-width != 'none') {
    max-width: $max-width + px;
  }
  &::before {
    float: left;
    content: "";
    padding-top: round(($height / $width) * 100% * 100) / 100;
  }
  &::after {
    display: block;
    content: "";
    clear: both;
  }
  > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.sample-16-9 {
  @include aspect-ratio(16, 9);
  background: lightblue;
}

.sample-16-9-400 {
  @include aspect-ratio(16, 9, 400);
  background: lightblue;
}

.sample-4-3 {
  @include aspect-ratio(4, 3);
  background: lightgreen;
}

元記事を表示する