## サイズ変更が必要な場合 [[object-fit]]に`cover`を指定し、`width`と`height`を指定する。 ### Before ```html <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ``` ↓ <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ### After ```html <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ``` ↓ <img style="object-fit: cover; width: 128px; height: 64px" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ### 中央以外でトリミングしたい場合 [[object-position]]を指定する。 `object-position: 0 0` <img style="object-position: 0 0; object-fit: cover; width: 128px; height: 64px" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> `object-position: 0 25%` <img style="object-position: 0 25%; object-fit: cover; width: 128px; height: 64px" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> `object-position: 0 75%` <img style="object-position: 0 75%; object-fit: cover; width: 128px; height: 64px" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> `object-position: 0 100%` <img style="object-position: 0 100%; object-fit: cover; width: 128px; height: 64px" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ## サイズ変更が不要な場合 [[clip-path]]を使う。 ### Before ```html <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ``` ↓ <img src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ### After ```html <img style="clip-path: inset(25px)" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ``` ↓ <img style="clip-path: inset(25px);" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-128.png" /> ### 参考 - [画像をCSSでトリミングする様々な手法まとめ \| ahalog – Web Blog](https://ahalog.tdesignworks.net/html_css/trimming-image-with-css/#link01)