๐ object-fit
- <img>๋ <video>์ ํฌ๊ธฐ๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ค ๊ฒ์ธ์ง ์ค์ ํ๋ ์์ฑ.
| ํ์ | ์ค๋ช |
| fill | ๊ธฐ๋ณธ๊ฐ, ๊ฐ๋ก์ธ๋ก ๋น์จ์ ๋ฌด์ํ์ฌ ๋นํ์์ด ๋ถ๋ชจ๋ฐ์ค๋ฅผ ๊ฐ๋ ์ฑ์ |
| container | ๊ฐ๋ก์ธ๋ก ๋น์จ ์ ์งํ ์ํ๋ก ๋ถ๋ชจ ๋ฐ์ค์ ํฌ๊ธฐ๋งํผ ๋์ด๋จ |
| cover | container์ ์ ์ฌํ๋ ๋ถ๋ชจ์ ๊ฐ๋ก์ธ๋ก ๋น์จ์ด ๋ค๋ฅผ ๊ฒฝ์ฐ ์ผ๋ถ ์๋ผ๋ |
๐ ์ฐธ๊ณ ์ถ์ฒ
object-fit - CSS: Cascading Style Sheets | MDN
CSS object-fit ์์ฑ์ <img>๋ <video> ์์์ ๊ฐ์ ๋์ฒด ์์์ ์ฝํ ์ธ ํฌ๊ธฐ๋ฅผ ์ด๋ค ๋ฐฉ์์ผ๋ก ์กฐ์ ํด ์์์ ๋ง์ถ ๊ฒ์ธ์ง ์ง์ ํฉ๋๋ค.
developer.mozilla.org
'Css' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| nth-child ๋ค์ํ๊ฒ ์ฌ์ฉํ๊ธฐ (1) | 2023.12.27 |
|---|---|
| Css์์ ๋ณ์ ์ฌ์ฉํ๊ธฐ (0) | 2023.12.25 |
| cubic-bezier (1) | 2023.12.21 |
| Css๋ก ์ ๋๋ฉ์ด์ ๊ตฌํํ๊ธฐ (1) | 2023.12.20 |
| media qurey ๋ฐ์ํ (0) | 2023.12.15 |
