object-fit

参考:

object-fit | MDN

使い方

表示領域を覆うように大きさを調節してトリミングする。

object-fit: cover;

表示領域に収まるように大きさを調節する。

object-fit: contain;

参考:

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

object-fit – CSS だけで画像をトリミングできる | FASTCODING BLOG

object-fit プロパティで画像をトリミングしよう | ウェブラボ関西オフィス

object-fit は CSS だけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー | WEBDESIGNDAY

object-fit / object-position – 置換要素のレイアウトのためのプロパティ | CodeGrid

CSS で画像をトリミングする | HTML クイックリファレンス

CSS の object-fit による画像の切り抜き/リサイズまとめ | CatNose

object-fit プロパティの意味と使い方 | できるネット

object-fit Property | W3Schools

max-height AND max-width with CSS only – Stack Overflow

aspect-ratio

参考:

aspect-ratio プロパティの使い方/レスポンシブやレイアウトシフトで大活躍 | コリス

幅を制限する

img {
    max-width: 100%;
    height: auto;
}Code language: CSS (css)

参考:

画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合の CSS | にししふぁくとりー

画像の大きさを最適化する max-width: 100%; | ホームページの作り方

Responsive Web Design Images | W3Schools

max-width set to original image size? – Stack Overflow

Scaling Images Proportionally in CSS with max-width – Stack Overflow

How to set max width of an image in CSS – Stack Overflow

高さを制限する

参考:

Limit the height of a responsive image with CSS – Stack Overflow

Safari のバグ

  • height: 100% を指定すると表示がおかしくなる

参考:

Safari image resize bug? box-model issue? – Stack Overflow

Can I Use

参考:

object-fit | Can I Use Support Tables

object-position | Can I Use Support Tables

まとめ

参考:

HTML の画像 (img タグ) の使い方 コンプリートガイド | コードキッチン

CSS で画像をトリミングする方法を解説! | Qumeru マガジン

記事をシェアする:
タグ:

コメントを残す

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

Protected by reCAPTCHA