반응형으로 종횡비 유지하여 이미지 표시하기

Juno·2020년 11월 25일

반응형 웹을 공부하면서 <img /> 태그가 아닌, 특정 card와 같은 컴포넌트에 가로 세로 비율을 유지하면서 background-image를 주는 방법에 대해서 소개드리려고 합니다!

🏞 이미지 태그 활용

이미지 태그를 활용했을 땐 width: 100% height: auto 속성을 이용하여 너비는 꽉 차게, 높이는 이미지의 비율에 맞게 조정할 수 있습니다.

.contianer {
	display: grid;
    	grid-template-column: repeat(auto-fill,minmax(300px,auto));
}

.card {
    	width: 100%;
	height: auto;
}

🌁 background-image 속성 활용

<div> 태그 등으로 크기가 있는 컨테이너에 대해서 background-image 속성을 주어서 컨테이너를 화면 사이즈에 따라 크기를 변경시키며 반응형으로 구현할 수도 있습니다.

1️⃣ 이미지를 브라우저의 크기에 따라 꽉 채울 경우

.card{
    width: 100%;
    height: 100vh;
    background-image: url("image-url");
    background-repeat: no-repeat // background-image가 컨테이너를 가득 채우지 못할 경우에도 반복하지 않는다.
    background-size: cover; // 사이즈가 container에 맞지 않아도 꽉 차도록 채운다.
    background-position: center; // background-image가 컨테이너에 가운데로 오도록 한다. 
}

이와 같은 경우는 화면을 꽉 채우는 경우에 사용할 수 있는 코드입니다.
width: 100% 로 너비를 화면에 꽉 채우고, 100vh로 높이를 뷰포트에 맞게 적용시켜 화면의 높이에 맞게 조정됩니다.
이때, height: auto 나 height: 100% 가 아닌 100vh로 준 이유는, div 에 높이가 들어가지 않을 경우
이미지가 배경으로 들어가도 높이가 없기 때문에 원하는 결과가 나오지 않습니다.
(퍼센트는 가장 가까운 부모 요소에 상대적인 영향을 받기 때문에, 부모 요소가 없을 경우 값을 갖지 못하기 때문입니다.)

🔖 참고 : vh, vw
vh와 vw는 각각 vertical height, vertical width에 해당하며 vh 속성은 뷰포트 높이값의 1/100 단위 입니다!
예를들어, 브라우저(view port)의 높이 값이 500px 일때, 1vh는 5px에 해당하게 됩니다.

2️⃣ 이미지 태그를 활용한 윗 부분처럼 화면 크기에 상관없이 종횡비 유지하는 경우

.card{
	width : 100 %;
	height : 0;
	padding-top : calc (300 / 1000 * 100 %); / * calc (이미지 높이 ÷ 이미지 가로 × 100 %) * /
	background : url ("image-url") center center / cover no-repeat;
}

width: 100%는 똑같이 설정해 주면 되지만,
높이는 비율로 주게되면 높이가 없게되는 문제가, 뷰포트로 주게 되면 가로로 줄일 경우 높이가 고정되는 문제점이 있습니다.
이때, height: 0 으로 지정해 주고, padding-top 혹은 padding-bottom 을 이용합니다.

원하는 비율을 유지시켜 주기 위해 calc() 함수를 사용하고
padding-top: calc(width/height*100%); 와 같이 값을 부여하면 원하는 너비와 높이의 비율을 유지하며 채울 수 있습니다.

3️⃣ 만약, 해당 card 안에 <img/> 를 넣고 싶을 경우, padding으로 꽉 차있는 card 요소이기 때문에,
position: absolute 를 이용하여 위치시켜야 합니다!

.card {
	position: relative;
    	width: 100%;
    	height: 0;
    	padding-top: calc(300 / 1000 * 100%);
	img {
	    position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
	}
}