MENU

投稿画像に便利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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次