Css
object-fit
Urime
2023. 12. 22. 09:07
๐ object-fit
- <img>๋ <video>์ ํฌ๊ธฐ๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ค ๊ฒ์ธ์ง ์ค์ ํ๋ ์์ฑ.
| ํ์ | ์ค๋ช |
| fill | ๊ธฐ๋ณธ๊ฐ, ๊ฐ๋ก์ธ๋ก ๋น์จ์ ๋ฌด์ํ์ฌ ๋นํ์์ด ๋ถ๋ชจ๋ฐ์ค๋ฅผ ๊ฐ๋ ์ฑ์ |
| container | ๊ฐ๋ก์ธ๋ก ๋น์จ ์ ์งํ ์ํ๋ก ๋ถ๋ชจ ๋ฐ์ค์ ํฌ๊ธฐ๋งํผ ๋์ด๋จ |
| cover | container์ ์ ์ฌํ๋ ๋ถ๋ชจ์ ๊ฐ๋ก์ธ๋ก ๋น์จ์ด ๋ค๋ฅผ ๊ฒฝ์ฐ ์ผ๋ถ ์๋ผ๋ |
๐ ์ฐธ๊ณ ์ถ์ฒ
object-fit - CSS: Cascading Style Sheets | MDN
CSS object-fit ์์ฑ์ <img>๋ <video> ์์์ ๊ฐ์ ๋์ฒด ์์์ ์ฝํ ์ธ ํฌ๊ธฐ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์กฐ์ ํด ์์์ ๋ง์ถ ๊ฒ์ธ์ง ์ง์ ํฉ๋๋ค.
developer.mozilla.org