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とその計算式をご使用ください。

関連記事

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

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

WEBデザイン|PhotoshopかIllustratorか、はたまたXDかという議論

2大巨頭のPhotoshopとIllustrator、そこへ参入する新生XD この課題はアプリケーションの習熟度やコーディングを受け持つエンジニアの視点から検討...

wordpress01

サイト構築でCMSをオススメする理由

WEBサイトの管理、どうしていますか? 今やどの企業でさえもWEBサイトを持っているのが当たり前の時代になっています。 しかしWEBサイトを作っただけで満足する...

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

花粉症との戦い

花粉症の季節がやってきてしまいました。 今年は去年より多いそうで、筆者は戦慄して...

進化したGoogle レンズ

写真や画像に関連する情報を取得したいなら、「Googleレンズ」が便利です。 こ...

もうすぐ節分!ことしは2月2日

早いもので1月があっという間に過ぎ、2月を迎えようとしています。 2月といえば節...

右横文字のアイキャッチ画像

はたらくクルマの“右横書き”に見る、風習や習慣の変化について。

トラックや業務用車両の右側面によく見かける、右から左に向かって書かれている「右横...