이미지 가로 세로 크기 동일하게 만드는 방법 (정사각형)

화면 크기가 달라져도 이미지의 가로 크기와 세로 길이가 동일하게 유지되도록 하고 싶은 CSS나 자바스크립트로 시도해볼 수 있습니다. 이미지가 가로 세로 비율이 동일하게 유지하고 싶은 경우 아래의 방법을 테스트해보시기 바랍니다.

CSS를 사용하여 이미지 종횡비 (Aspect Ratio) 유지하기

이미지 크기가 변해도 종횡비 (예: 4:3, 16:9)를 유지하고 싶은 경우, 혹은 가로 세로 크기를 동일하게 유지하고 싶은 경우 W3Schools 문서를 참고해보시기 바랍니다.

How To - Aspect Ratio / Height Equal to Width

예를 들어, 다음과 같은 CSS를 사용하여 높이를 너비와 동일하게 설정하는 것이 가능합니다.

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}

/* If you want text inside of the container */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

jQuery를 사용하여 가로 세로 크기를 동일하게 설정하기

위의 방법으로 소기의 목적을 달성할 수 있다면 좋겠지만, 경우에 따라서는 잘 작동하지 않을 수도 있습니다. 이 경우 자바스크립트를 사용하여 이미지의 너비 (폭)를 측정하여 이미지의 높이를 강제로 설정해주는 방법을 고려할 수 있습니다.

테스트를 해 보니 다음 Stackoverflow 문서에서 제시하는 방법이 잘 작동하는 것 같습니다.

• jQuery - set div height equal to div width (JQuery를 사용하여 div의 높이를 div의 폭으로 설정하기)

예를 들어, 티스토리 스킨 중 하나인 북클럽의 커버 페이지에 표시되는 이미지를 정사각형으로 표시하고 싶은 경우 다음과 같은 스크립트로 가능합니다.

<script>
$(window).resize(function(){

$('.cover-thumbnail-2 ul li figure img').each(function() {
$(this).height($(this).width());
});
}).resize();
</script>

위의 코드는 예시일 뿐입니다. 티스토리 북클럽에서 커버 페이지의 썸네일을 정사각형으로 표시하고 싶은 경우 간단히 HTML 파일을 수정하여 가능합니다. 워드프레스 등에서도 비슷하게 응용이 가능합니다.

CSS로 원하는 대로 되지 않는 경우에 이 방법을 고려해볼 수 있습니다.

이미지가 반응형으로 작동하도록 하고 싶은 경우에 효과가 있을 것입니다. 이미지 폭이 화면 크기에 따라 고정되어 있는 경우에는 굳이 jQuery를 사용할 필요 없이 CSS 미디어 쿼리를 사용하여 화면 해상도에 따라 이미지 높이를 설정해주는 것도 고려해볼 수 있을 것입니다.

참고

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법

CSS로 텍스트 라인 수 제한하는 방법