ブロック要素のアスペクト比を固定する方法
参考:
Aspect Ratio Boxes | CSS-Tricks
画像に object-fit を指定する
参考:
CSSだけで画像の縦横比を維持したサムネイルを表示する – Qiita
サイズがわからない画像の縦横比を維持したまま表示する方法 object-fit – Qiita
Force an image to fit and keep aspect ratio – Stack Overflow
object-fit – CSS: カスケーディングスタイルシート | MDN
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Web クリエイターボックス
画像を簡単にトリミング&レスポンシブできる object-fit プロパティ | フロントエンド | kigiroku
object-fitとobject-positionで画像をトリミングする方法(IE・Edge対応) | ダイナシイエスタデイ
拡大・縮小
参考:
「max-width: 100%」が指定されたimg要素を縦横比が維持された状態で縮小する方法 | CreativeStyle
スタイルシートで画像を縦横比そのままにリサイズする方法。| 和洋風KAI
画像の縦横比を維持したままリサイズ(拡大/縮小)するCSS – スタイルシートTipsふぁくとりー
css 画像比率を保ったまま拡大・縮小する方法(39407)|teratail
Safari Image Size Auto Height CSS – Stack Overflow
だぶだぶノート » CSS、width:auto、height:autoとタグ属性の関係
画像のアスペクト比を固定するその他の方法
参考:
img画像の縦横比を保ったままボックス内に収める方法 | 1design
CSS force image resize and keep aspect ratio – Stack Overflow
CSSで画像のアスペクト比を保持したままいい感じにトリミングする(レスポンシブ対応) – yuri memo
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld
object-fitをCSSのみでIEにも対応してみる – Qiita
padding-top
参考:
padding-top – CSS: カスケーディングスタイルシート | MDN
How is padding-top as a percentage related to the parent’s width? – Stack Overflow