CSSのaspect-ratioプロパティがすべてのブラウザにサポートされました、画像をアスペクト比で実装する今までとこれからの実装方法

先日アップデートされたSafari 15とSamsung Internet 15により、すべてのエバーグリーンブラウザでaspect-ratioプロパティがサポートされました。 ※エバーグリーンとは、最新版に自動アップデートされるブラウザのことです。 aspect-ratioプロパティを使用することで、レスポンシブ対応の画像をアスペクト比を維持したまま簡単に実装できます。 CSSでアスペクト比を実装する今までとこれからの実装方法を紹介します。 CSS ways to Create Fixed Aspect Ratio aspect-ratioプロパティとは 1. Padding Hack 2. Viewport width solution 3. aspect-ratioプロパティ デモ aspect-ratioプロパティとは aspect-ratioプロパティは名前の通り、アスペクト比を

[coliss]

CSSでアスペクト比を実装する今までとこれからの実装方法。

[poliphilus]

あとは「height:auto のボックスの上下センター」を table-cell とか使わずにできるようにしてくれー。

[dalmacija]

こんな当たり前のことが少しずつしか進まないとはどこまでWeb標準はUXに疎い技術者偏重で行くんだろう

[casm]

ほえー。なんか黄金比でどんどん分割してみるかな。

[mr_mayama]

おじいちゃん、上下centerはflexでできるでしょ。

[heatman]

“アスペクト比”

[ducktoon]

ありがてぇ。いままでのは裏技みたいな方法だったからな

[tetsu040e]

ついにメジャーブラウザすべてでサポートされた！ 最新バージョンのみサポートで良いプロジェクトであれば使えるようになった！

[d-matchon]

めでたい

[phoope]

だいぶ楽になる

[fujibay1975]

今日もpadding-topで書いちゃった。

[GiveMeChocolate]

お〜〜〜

[eartht]

caniuse見る限りはIE非対応っぽいので、来年まで我慢か。しかしMDN見るといけるっぽくもあり。試してみねば…。

[minetty99]

レスポンシブが生まれてから何年経ったと思ってんねん。。。。

[hiduki001]

素晴らしい。この調子でどんどん便利になってくれ

[Falky]

padding-hackを殺せるのか。IEさえ切っていれば。めでたすぎるけど、それはそれとして標準化があまりに遅いわ…10年遅い。マジで

[hogashi]

めでたすぎる

[Cherenkov]

aspect-ratio

[mizdra]

サポートめでたい！

[spark7]

paddingでやってるわ。

[shinagaki]

CLS対策によさそう

[mayumayu_nimolove]

便利になると言うことは時間ができると言うこと。ふふふ。

[Shinwiki]

16 / 9 なんて使うじょうよわなんて無視でええんや

[sippo_des]

どんどん便利になってほしいね。

[gyochan]

「すべてのブラウザ（ただしIE11は含まない）」

[roppara]

中々便利そうやな

[localnavi]

おお、これでもう「:before に padding-top を設定してゴニョゴニョ」とはオサラバできるのか。あれ面倒くさいんだよね。

[kawaosa]

アスペクト