doors doors
aspect

要素がペシャンコになっちゃう人へ

  • HOME
  • MEMO
  • 要素のアスペクト比(縦横比)を維持する方法

要素のアスペクト比(縦横比)を維持する方法

aspect

CSSにおいて、画面いっぱいの中の要素のアスペクト比(縦横比)を維持する方法を書き留めておきます。
単純に横幅も縦幅もpxで指定するのではなく、デバイスの変化に対応できるものです。
方法はとても簡単です。

CSSでの記述の仕方

例えば横幅400px、縦幅300pxのアスペクト比を維持したい場合は以下の通り。

section {
  width: 100vw;
  height: calc(100vw * 0.75);
}

解説

まずvwとは、viewport widthの略で、デバイスの横幅に対するパーセンテージを指定できます。

その為、横幅をまず基準として考え、横幅に対する縦幅の割合を掛けてやります。

横幅 * ( アスペクト割合 = 縦幅 / 横幅 )

つまりデバイスの中で60%ほどの横幅にしたい場合は、上記100vwの箇所を60vwとすれば良いわけです。

%でも良いのでは?と思うかもしれませんが、パーセンテージは親要素に対するものですからわけが違ってきます。
さらに縦幅の指定も、横ではなく親要素の縦に対して何%なのかを出そうとするので、アスペクト比は維持されません。

こちらでさらに詳しく説明されておりました。 参考にぜひどうぞ。

画像の場合

既知の方は多いと思われますが以下の通りです。 画像は縦横の情報を持っているのでしょう、これで十分です。

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

画像の親の領域を画像と同じように変化させたい場合は、ぜひvwとその計算式をご使用ください。

関連記事

Illustrator|アピアランスでボタンを作る

イラストレータのアピアランスを使ってボタンを作る Illustratorのアピアランスを使った方法はボタンに限らず、いろいろな場面で活用できるのでおすすめです。...

【WordPress】投稿者が仲良くなれる管理画面にカスタマイズしてみた

この記事はWordPressを使用しており、複数人の投稿で成り立っています。 投稿の内容も十人十色となるわけで、 「ここのレイアウトこうしたい…」 「新しいレイ...

aタグでリンクを繋げる際に気をつけたい事

aタグで外部へリンクを繋げる時、単純に<a href=”〜〜〜〜” target=”_blank”>リンクを繋げる</...

WEB:企業サイト、PRサイト、ランディングページ、バナー制作やCMS構築、モーショングラフィックス、VP、動画制作、パンフレット、ポスター、チラシ、DMなど制作から印刷・納品まで。 お気軽にお問い合わせください。

Illustrator|3Dとマテリアル

イラストレータの3Dが復活! しかもパワーアップして戻ってきました!  バージョ...

Dreamweaver|ライブラリのリンク

状況 Dreamweaverのライブラリを使用する場合で、トップページ(inde...

Brackets|サポート終了からその後・・・

Brackets|サポート終了からその後 結論からお伝えすると、今は「Brack...

Brackets|サポート終了

Brackets|突然、告げられるサポート終了 参りました・・・2021年9月を...