WEBEER – Web制作の覚えがき –

可変の要素で縦横比を確保する

Sass/CSS
Sass/CSS 更新日:2020.09.30 公開日:2020.09.17

横幅が可変する要素で縦横比(アスペクト比)を維持したまま高さを確保したいことってありますよね。

<div>
  <span></span>
</div>
div {
  width: 100%;
  position: relative;
  &:before {
    content: "";
    display: block;
    padding-top: (5 / 9) * 100%;
  }
  span {
    position: absolute;
    display: block;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

擬似要素のpadding-topで高さを確保しています。

padding-top: (横 / 縦) * 100%;

横÷縦×100で比率が計算できます。

私がよく使うやつ

%extend-ratio {
  width: 100%;
  height: auto;
  padding-top: $image-raito * 100%;
  position: relative;
  img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
<div class="img-cover">
  <figure><img src="..." alt="..."></figure>
</div>
.img-cover {
  width: 120px;
}
figure {
  @extend %extend-ratio;
}