Web/CSS/aspect-ratio を新規翻訳

- 2021/10/05 時点の英語版に基づく

1 files changed, 80 insertions, 0 deletions

diff --git a/files/ja/web/css/aspect-ratio/index.md b/files/ja/web/css/aspect-ratio/index.md
new file mode 100644
index 0000000000..5b05bb185b
--- /dev/null
+++ b/files/ja/web/css/aspect-ratio/index.md
@@ -0,0 +1,80 @@
+---
+title: aspect-ratio
+slug: Web/CSS/aspect-ratio
+tags:
+  - CSS
+  - CSS プロパティ
+  - 画像
+  - リファレンス
+  - aspect-ratio
+  - recipe:css-property
+browser-compat: css.properties.aspect-ratio
+translation_of: Web/CSS/aspect-ratio
+---
+{{CSSRef}}
+
+**`aspect-ratio`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ボックスの**推奨アスペクト比**を設定します。これは auto の大きさを計算したり、他のレイアウト関数で使用されたりします。
+
+```css
+aspect-ratio: 1 / 1;
+aspect-ratio: 1;
+
+/* グローバル値 */
+aspect-ratio: inherit;
+aspect-ratio: initial;
+aspect-ratio: revert;
+aspect-ratio: unset;
+```
+
+### 値
+
+- `auto`
+  - : 内在的なアスペクト比がある[置換要素](/ja/docs/Web/CSS/Replaced_element)の場合は、*その*アスペクト比を使用し、それ以外の場合はボックスに推奨アスペクト比が設定されません。内在的なアスペクト比を使用して寸法を計算する際には、常にコンテンツボックスの寸法に対して行われます。
+- {{cssxref("<ratio>")}}
+  - : ボックスの推奨アスペクト比は、`width` / `height` で指定された比率です。`height` とそれに先立つスラッシュ文字が省略された場合、`height` の既定値は `1` です。推奨アスペクト比を含む寸法の計算では、`box-sizing` で指定されたボックスの寸法で行われます。
+
+## 公式定義
+
+{{cssinfo}}
+
+## 形式文法
+
+{{csssyntax}}
+
+## 例
+
+### aspect-ratio の値の例
+
+```css
+aspect-ratio: 1 / 1;
+aspect-ratio: 16 / 9;
+aspect-ratio: 0.5;
+```
+
+## 幅と高さの aspect-ratio への対応付け
+
+ブラウザーは、内部の `aspect-ratio` プロパティを追加しました。これは[置換要素](/ja/docs/Web/CSS/Replaced_element)や、 `width` と `height` 属性を受け入れるその他の関連要素に適用されます。これは、ブラウザーの内部 UA スタイルシートに現れます。
+
+Firefox では、内部のスタイルシートルールはこのようになっています。
+
+```css
+img, input[type="image"], video, embed, iframe, marquee, object, table {
+  aspect-ratio: attr(width) / attr(height);
+}
+```
+
+この機能については[画像に高さと幅を設定することが再び重要に](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) (英語) で詳しく読むことができます。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [メディアのコンテナー要素の幅と高さの属性をアスペクト比にマッピングする](/ja/docs/Web/Media/images/aspect_ratio_mapping)
+- [Designing an aspect ratio unit for CSS](https://www.smashingmagazine.com/2019/03/aspect-ratio-unit-css/)
+- [Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)