サイズが違う画像を入れたら、全体の形が崩れちゃった。同じ比率にしたいけどどうしたらいいんだろう...
画像の処理で時間がかかってしまうことありませんか？
コンテンツの中で、画像や動画の見栄えを保つためにも、アスペクト比（縦横比）を固定させることはとても大切です。
アスペクト比を固定していない場合
テキストの位置がずれていて統一感がありませんよね。
今回は全体のレイアウトを整える方法として以下について解説していきます。
そもそもアスペクト比とは
画像のアスペクト比を維持する方法（padding-top編）
目次
アスペクト比（縦横比）とは
アスペクト比は、幅と高さの比率のことをいいます。例えば、横幅が100px、縦幅が50pxの場合、アスペクト比は「2:1」になります。
などにはこのような方法で画角を指定する必要があります。
アスペクト比を固定する方法（padding-top）
今回は、カードを3枚ある場合を想定します。
完成イメージ▼
See the Pen アスペクト比固定(img) by misaki (@miikolife) on CodePen.
アスペクト比をpadding-topで指定する方法は、以下の手順に従って行います。（完成版は一番下にまとめてあります）
画角計算は「高さ ÷ 幅 × 100」です。
例） 幅：980px, 高さ：735pxの可変要素を作りたい場合
735(高さ) ÷980(幅) × 100 = 75
となるので、”padding-top: 75%;” と指定します。
imgタグ
1.HTML作成します。コンテナ要素(”card-img”)を作成し、コンテナ内にアスペクト比を設定したい要素のコンテナ内にコンテンツを配置します。（画像、地図、動画等）以下はカード一部を切り取ってあります（全体は下部にまとめてあります。）
<div class="card__img">
<img src="画像パス" alt="画像の説明">
</div>2.CSS（SCSS）でスタイルを指定します。ここでは、コンテナ要素（card-img）の幅を100%に設定し、positionをrelativeに指定します。
.card__img {
width: 100%;
position: relative;
}3.コンテナにpadding-topプロパティを使用して、先ほど計算したアスペクト比を指定します。
.card__img{
width: 100%;
position: relative;
padding-top: 75%; /* 例としてアスペクト比4:3の場合 */
}4.アスペクト比を設定したい要素（img）に対してCSSを指定します。ポイントはobject-fit: cover;です。指定した画角よりも大きいサイズのものを入れたい時でも画角に合わせて調整してくれます。
.card__img img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
object-fit: cover;
}完成版▼
<ul class="card__items">
<li class="card__item">
<div class="card__img">
<img src="画像パス">
</div>
<p class="card__text">テキストテキストテキスト</p>
</li>
<li class="card__item">
<div class="card__img">
<img src="画像パス">
</div>
<p class="card__text">テキストテキストテキスト</p>
</li>
<li class="card__item">
<div class="card__img">
<img src="画像パス">
</div>
<p class="card__text">テキストテキストテキスト</p>
</li>
</ul>/*--- card全体のスタイルです ----*/
.card__items{
display: flex;
width:60%;
}
.card__item{
border:1px solid black;
list-style:none;
width: calc(33% - 24px * 2 / 3);
background-color: #FFF;
border-radius: 4px;
padding: 13px;
}
.card__item:not(:nth-child(3n + 1)){
margin-left: 24px;
}
.card__item:nth-child(n + 4){
margin-top: 24px;
}
/*--- 画像 ----*/
.card__img{
width: 100%;
position: relative;
padding-top: 75%;
}
.card__img img{
position: absolute;
width: 100%;
height: 100%;
top: 0;
object-fit: cover;
}
/*--- テキスト ----*/
.card__text{
margin-top: 4px;
margin-bottom: 0;
}上記の例では、padding-topの値を75%に設定していますが、具体的な値はコンテンツのアスペクト比に合わせて調整してください。
background-image
コンテナ要素にbackground-imageを指定し、画像パスを入れます。
完成版▼
<ul class="card__items">
<li class="card__item">
<div class="card__img one"></div>
<p class="card__text">テキストテキストテキスト</p>
</li>
<li class="card__item">
<div class="card__img two"></div>
<p class="card__text">テキストテキストテキスト</p>
</li>
<li class="card__item">
<div class="card__img three"></div>
<p class="card__text">テキストテキストテキスト</p>
</li>
</ul>/*--- card全体のスタイル ----*/
.card__items{
display: flex;
width:60%;
}
.card__item{
border:1px solid black;
list-style:none;
width: calc(33% - 24px * 2 / 3);
background-color: #FFF;
border-radius: 4px;
padding: 13px;
}
.card__item:not(:nth-child(3n + 1)){
margin-left: 24px;
}
.card__item:nth-child(n + 4){
margin-top: 24px;
}
/*--- 画像 ----*/
.card__img{
width:100%;
height:0;
padding-top:75%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.card__img.one{
background-image:url("画像パス");
}
.card__img.two{
background-image:url("画像パス");
}
.card__img.three{
background-image:url("画像パス");
}
/*--- テキスト ----*/
.card__text{
margin-top: 4px;
margin-bottom: 0;
}まとめ
今回は、padding-topを利用したアスペクト比（縦横比）の固定方法を紹介しました！
アスペクト比（縦横比）を固定していないと、コンテンツが崩れてしまうのでぜひ活用してみてください。
今回紹介したpadding-topは古いブラウザにも対応しており、安定した実装が可能です。
ただし記述量が増えてしまうデメリットもあるので、次回の記事のプロパティ”aspect-ratio”もぜひ参考にしていただき、案件にあった記述をしていきましょう。
今回の記事がご参考になれば嬉しいです！
