CSSで画像の縦横比を維持したまま表示させる方法【レスポンシブ対応】

みなさんこんにちは、ゆうやです！

本記事では、

「画像の縦横比率を自由自在に維持できる方法が知りたい！」

「iframeのレスポンシブ対応がしたい！」

という方に向けてTipsを紹介します！

img画像の縦横比維持方法

imgタグで表示させる画像の比率維持は以下のコードで対応します！

img {
  width: 100%;
  height: auto;
}

上記は全ページ共通で読み込むファイル内に記述するといいでしょう！

筆者は普段「default.css」というファイルを作りその中にbodyタグ、aタグ、imgタグなどの設定を記述しています！

コーディングが激的に楽しくなるdiv比率維持方法

この方法ははっきり言って神です！

それを知らなかった時の著者はWordPress構築の案件でブログのアイキャッチ画像が入るカードデザインのコーディングが大大大大大嫌いでした！！！！

クライアントは7割方Webに明るくないため画像の縦横比率なんてものはお構いなしにアイキャッチ画像を設定します。

これから紹介する方法でコーディングしないと、どうなるか？

カードブロックが縦長になったりとぐしゃんぐしゃんになり見るも無残なWebサイトになってしまうでしょう、、、！！（体験談）

もしあの時、仕事仲間から教えてもらっていなかったら、、

そんな未来を想像すると怖くて昼も昼寝できません。

さて筆者の過去回想が終わったところで、どういうTipsか見ていきましょう〜

僕のヒーローbackground:urlとpadding-top

HTML構造はこんな感じで至ってシンプル！

divの中にdiv！

<div class="Item">
  <div class="Item-Img"></div>
</div>

、、、で！ここからがミソです！

子要素のdivに直接styleタグでCSSを書きます！画像も指定します！

こんな感じに！！

<div class="Item">
   <div class="Item-Img" style="background:url('./img/画像名') no-repeat center; background-size:cover; background-position:center;"></div>
</div>

お次はCSSを書きます！

こんな感じに！！

.Item{
  width: 100%;/*お好みで*/
}
.Item-Img{
  width: 100%;
  padding-top: 52.5%;/*he is my hero*/
}

「padding-top」で縦横比を%指定します(^o^)

上記の例は、TwitterのOGP画像（summary_large_image指定時）の比率です！

Twitter OGPのサイズ

計算方法もみてみましょう！

（１）画像の横幅が縦幅より大きい時は「縦幅 / 横幅 × 100」を。

（２）その逆のときは「横幅 / 縦幅 × 100」で比率計算しましょう！

（２）は例えばLIG HPの縦長画像のような形で重宝します(^o^)

LIG トップページより

縦横比率の計算方法が分かった所でお次は様々な比率の画像を見ていきましょう〜！

正方形の縦横比率

正方形画像の縦横比率を維持したい場合は、前述のpadding-topの値を「100%」指定すればOKです(^o^)

.Item{
  width: 100%;/*お好みで*/
}
.Item-Img{
  width: 100%;
  padding-top: 100%;
}

SNSのプロフィールアイコン画像によく見られる正円にしたい場合は画像に「border-radius:50%」と指定してやってください(^o^)

.Item-Img{
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;/*正円に*/
}

比率 16:9 Youtube動画サムネイル

みんな大好き！Youtube動画のサムネイルに見られる比率が16:9です（「1280×720px」や「1920×1080px」）！

こんなサイズ↓↓↓

画像を16:9にした場合は、padding-topの値を「56.25%」指定してやってください(^o^)

.Item-Img{
  width: 100%;
  padding-top: 56.25%;
}

黄金比 8:5

「人が嫌でも美しいと感じてしまう」黄金比というものがあるらしく、その比率が5:8（今回紹介しているのは横縦なので8:5と書いてます）！

画像を黄金比に維持したい場合は、padding-topの値を「62.5%」指定してやってください(^o^)

.Item-Img{
  width: 100%;
  padding-top: 62.5%;
}

iframeのレスポンシブ対応

Webサイトの「アクセスページ」によく配置することが多いGoogle MAP。

その比率維持も前述したpadding-topと+αで実装することができますので覚えていただければ幸いです(^o^)

（１）まず、Google MAP埋め込みコードのiframeをdivの中に入れます↓↓↓

<div class="GoogleMap">
  <iframe src="長いので省略" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
</div>

（２）比率維持のスタイルを当てます

.GoogleMap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;/*比率をお好みで*/
}
.GoogleMap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

上記のように指定することでどのデバイスでも自由自在に地図を綺麗に表示させることができますのでぜひお試しあれ〜

まとめ

いかがでしたでしょうか。

backgroundで画像を指定する方法などほんとにほんとに便利なのでぜひお試しくださいまし！

画像比率維持で困っているお友達がいたら本記事で紹介した方法で助けてあげてください〜

GoogleMapのレスポンシブについてさらに実践的で活用できる実装法に興味がある方は以下の記事もチェックしてみてください〜

GoogleマップをCSSでレスポンシブ対応させる方法