object-fit

表示領域を覆うようにリサイズされます。

object-fit: cover;

表示領域に収まるようにリサイズされます。

object-fit: contain;

参考:

object-fit – CSS: カスケーディングスタイルシート | MDN

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

object-fit | Can I use… Support tables for HTML5, CSS3, etc

height: 100%

Safari Image Resize Bug? Box-Model Issue? – Stack Overflow

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です