본문 바로가기

CSS

Object-fit

 

object-fit: cover은 빈 곳 없이 꽉 차있게 한다. 이미지가 잘려 보일 수 있다.

object-fit: contain은 이미지의 비율을 유지하므로 꽉 차있지 않을 수 있다.

object-fit: none은 이미지의 본래 크기만큼 보여준다.

object-fit: scale-down은 이미지가 영역보다 작으면 none처럼, 크면 contain처럼 작용한다.

 

 

 

 

CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기

Engineering Blog by Dale Seo

www.daleseo.com

 

'CSS' 카테고리의 다른 글

text-overflow  (0) 2024.03.07
overflow  (1) 2024.03.07
white-space  (0) 2024.03.07
Styled-Components: 조건부 스타일링  (0) 2024.03.07
flex: 1  (0) 2024.03.07