オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

CSS object-fit およびオブジェクトの位置 プロパティは、画像を切り抜いて、要素での表示方法を指定するのに役立ちます。

CSSobject-fitプロパティの構文は次のとおりです-

Selector {
   object-fit: /*value*/
   object-position:/*value*/
}

例

次の例は、CSSobject-fitプロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
img {
   object-fit: cover;
}
img:last-of-type {
   object-fit: contain;
}
</style>
</head>
<body>
cover
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
<img src="https://images.unsplash.com/photo-1611423837981- 2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
contain
</body>
</html>

出力

これにより、次の結果が生成されます-

オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

例

<!DOCTYPE html>
<html>
<style>
div {
   border: 1px solid blue;
   width:100%;
   height:300px;
}
img {
   float:left;
   width:50%;
   height:100%;
   object-fit:cover;
   object-position: 20px -10px;
}
</style>
<body>
<div >
<img src="https://images.unsplash.com/photo-1611800065908-
233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" />
<img src="https://images.unsplash.com/photo-1612626256634-
991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

サイズ変更の効果

オブジェクトフィットとオブジェクト位置を使用してCSSで画像を切り抜く

CSSでのデータ属性（data- *）の使用

CSS：focus-疑似クラス内

CSSを使用したスクロールアンカーの無効化
Webブラウザが提供するデフォルトのスクロールアンカーを無効にするには、オーバーフローアンカーを使用できます。プロパティ。例次の例は、オーバーフローアンカープロパティのアイデアを示しています- <!DOCTYPE html> <html> <head> <style> body { overflow-anchor: none; } div{ display: flex; flex-direction: row; } </style> </hea
CSSでフォールバックを使用したWebP画像の使用
Webサイトで膨大な数の画像をレンダリングするには、圧縮率が高いため、webp形式を使用することをお勧めします。要素を使用して、サポートされていないブラウザのフォールバックを提供します- <picture> <source srcset="filename.webp" type="image/webp"> <source srcset=" filename.jpg" type="image/jpeg"> <img src=" filename