가로길이만큼 높이 지정

작업을 하다보면 가로 길이만큼 높이 지정(정사각형) 또는 가로 길이에 비례한 높이를 지정하고 싶은 경우가 존재합니다. 이 경우 가상선택자를 사용하면 쉽게 가능합니다.

1. HTML 작성
   정사각형 박스 안에 썸네일을 추가하려고 합니다. HTML은 아래와 같습니다.

   <div class="thumb">
     <img src="경로">
   </div>  

2. thum 클래스에 가상선택자 ::before 사용하기
   해당 값이 높이가 됩니다. 100%설정시 width의 사이즈와 동일합니다. 정사각형 박스를 만들 예정이니 100%로 설정합니다.

   .thumb::before {
      display: block;
      content: '';
      padding-top: 50%;
      width: 100%;
   }

3. 이미지의 position 을 absolute 로 설정합니다.
   object-fit: cover 을 활용하면 부모 엘리먼트의 정중앙에 위치 시킬 수 있습니다.

   img {
   	left: 0;
   	top: 0;
   	position: absolute;
   	width: 100%;
   	height: 100%;
   	object-fit: cover;
   }