| title | slug |
|---|---|
aspect-ratio |
Web/CSS/aspect-ratio |
{{CSSRef}}
aspect-ratio は CSS のプロパティで、ボックスの推奨アスペクト比を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。
aspect-ratio: 1 / 1;
aspect-ratio: 1;
/* グローバル値 */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: unset;{{EmbedInteractiveExample("pages/css/aspect-ratio.html")}}
auto- : 内在的なアスペクト比がある置換要素の場合は、そのアスペクト比を使用し、それ以外の場合はボックスに推奨アスペクト比が設定されません。内在的なアスペクト比を使用して寸法を計算する際には、常にコンテンツボックスの寸法に対して行われます。
- {{cssxref("<ratio>")}}
- : ボックスの推奨アスペクト比は、
width/heightで指定された比率です。heightとそれに先立つスラッシュ文字が省略された場合、heightの既定値は1です。推奨アスペクト比を含む寸法の計算では、box-sizingで指定されたボックスの寸法で行われます。
- : ボックスの推奨アスペクト比は、
{{cssinfo}}
{{csssyntax}}
aspect-ratio: 1 / 1;
aspect-ratio: 16 / 9;
aspect-ratio: 0.5;ブラウザーは、内部の aspect-ratio プロパティを追加しました。これは置換要素や、 width と height 属性を受け入れるその他の関連要素に適用されます。これは、ブラウザーの内部 UA スタイルシートに現れます。
Firefox では、内部のスタイルシートルールはこのようになっています。
img,
input[type="image"],
video,
embed,
iframe,
marquee,
object,
table {
aspect-ratio: attr(width) / attr(height);
}この機能については画像に高さと幅を設定することが再び重要に (英語) で詳しく読むことができます。
{{Specifications}}
{{Compat}}