[CSS] 이미지 Layout Shift 방지

 

 

 

이미지에 사이즈를 명시해주지 않으면 페이지 레이아웃이 변동(Layout Shift)되는 모습을 종종 볼 수 있다.

(이미지 뿐만 아니라 동적으로 삽입되는 컨텐츠, 광고들도 마찬가지)

이는 사용자 경험에 좋지 않다. 따라서 해결방법으로 이미지 사이즈를 명시해주면 된다.

하지만 요즘은 반응형으로 많이 제작하는 터라 직접적인 사이즈를 명시하기보다는

width:100%과 같은 스타일로 작성된 코드들을 많이 볼 수 있다.

이때 aspect-ratio를 사용하면 된다. 

 

img {
	width: 100%;
	height: auto;
	aspect-ratio: width / height;
}

 

 

 

aspect-ratio 속성에 관한 글은 예전글로 대신 대체한다

[CSS] aspect-ratio : 요소의 비율 유지하기