[CSS] 이미지/엘리먼트 비율 조정

 

 

 

 

1. 종횡비 조정(aspect-ratio)

.imgBox {
	width: 300px;
	aspect-ratio: 16 / 9;
}

• 너비 300px 기준으로 종횡비 16 / 9 설정한다.
• 너비, 높이가 둘 다 적용되는 경우 종횡비가 적용되지 않는다
  

 

2. 종횡비 AUTO

.imgBox {
	width: 300px;
  	aspect-ratio: auto 16 / 9;
	background-image: url(이미지url);
}

• 고유한 종횡비를 가지는 경우 해당 종횡비를 따르고, 아니면 16/9로 맞춘다.
• 고유한 종횡비 : 이미지와 같은 이미 요소가 가지고 있는 종횡비

 

3. 종횡비 고정

.imgBox {
    width: 300px;
    height: 100%;
    object-fit: cover;
    display: block;
}

.parent {
    width: 300px;
    aspect-ratio: 16/9;
}

• 이미지는 크기를 고정하고, 부모 태그에 aspect-ratio옵션을 줘서 종횡비만 조정한다.