ココカラハジメヨウ ウェブ、投資、美容、インビザライン

ウェブデザイン

2021.12.02CSS

投稿画像に便利cssでアスペクト比を固定

レスポンシブサイトでブラウザのサイズやデバイスが変わっても同じアスペクト比で変化していくcss

HTML

<div class="box">
<div class="inner zoomin1">
<a href="">
<img src="images/index-images/image01.jpg" alt="">
</a>
</div>
</div>

css

.box {
    position: relative;
    width: 100%;
}
.box:before {
    content:"";
    display: block;
    padding-top: 75%; /* 高さを幅の75%に固定 */
}
.box .inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin-bottom: 20px;
}
.box .inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  font-family: 'object-fit: cover;';
}

固定するときの高さのパーセンテージはこの計算
高さの比率 ÷ 幅の比率 × 100
4:3の場合は4÷3✖️100=75