이미지 style

Category
UI/UX
Status
Published
Tags
UI/UX
FrontEnd
Description
Published
Slug
notion image
notion image
 
<img style={{ width: "100%", height: "100%", maxHeight: "150px", objectFit: "contain", // 비율을 유지하며 이미지 조정 }} />
<img style={{ width: "100%", height: "100%", maxHeight: "150px", objectFit: "cover", // 비율을 유지하며 이미지 조정 }} />
objectFit: contain
objectFit: cover
 
objectFit을 이용하면, 이미지가 뭉개지지 않고, 비율을 맞춰서 보이도록 할 수 있다
속성에는 containe과 cover중 골라쓸 수 있다