kdcsライブラリー

WordPressでユーザーが画像を投稿にアップする時、画像サイズや縦横比がバラバラでレイアウトが崩れてしまうことを防止してサイズを合わせる手段。
cssの「aspect-ratio」で対応できるがsafari（ios14以前）は未対応
css

img {
  width: 96%;
  aspect-ratio: 16 / 9; /* 例：16:9の比率に統一 */
  object-fit: cover;    /* はみ出た部分を切り取ってフィット */
  height: auto;         /* 高さは自動で調整 */
  display: block;
}

古いブラウザや特殊な環境では効かない可能性があるため、フォールバックとして padding-top を使った従来の方法。

.aspect-box {
  position: relative;
  width: 96%;
  padding-top: 56.25%; /* 16:9の比率 */
}

.aspect-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}