システム Edit : 2021.02.17 Update : 2024.11.07

CSSで画像の横幅に対して、高さを比率で固定する方法

画像や動画の横幅が100%などで可変する時、高さも比率を合わせて可変してほしい場合のCSSをメモしておきます。
方法はめちゃくちゃ簡単です➡️ 『縦幅÷横幅の値を%にして指定する』

例えば、横1920px縦1080pxの画像を設置する時は、1080÷1920=0.5625 なのでCSSは以下になります。

Contents

CSS

.img {
  width:100%;
　position: relative;
}
.img:before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.img {

width:100%;

　position: relative;

}

.img:before {

content: "";

display: block;

padding-top: 56.25%;

}

編集者：コウ

年間約20万人が訪れるKOHIMOTO Laboの広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書｜テクノロジー × ヒューマニティのpositiveな未来🌍

INDEX

PICK UP

【誤タップ5%以内】2025年版・実例で学ぶモバイルのボタンサイズ設計、徹底ガイド

【月間80万PV】オウンドメディア「データのじかん」サイト改善の裏側

応募ページ到達が+2.1倍⤴「ブランドサイト」と「採用サイト」は分けるべき？事例で費用対効果をデータで比較してみた。