CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기
이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 100%; height: auto; } 반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가 해주고 적절한 너비를 부여하면 아래와 같다. .thumbnail-wrappper { width: 25%; } img { max-width: 100%; hei..
