이미지 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중 골라쓸 수 있다