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

2020. 7. 1. 05:17 | 댓글 2

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

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

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

 

How To - Aspect Ratio / Height Equal to Width

How TO - Aspect Ratio Learn how to maintain the aspect ratio of an element with CSS. Aspect Ratio Create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resized: What is aspect ratio? The aspect ratio of an element describes the propo

www.w3schools.com

예를 들어, 다음과 같은 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 문서에서 제시하는 방법이 잘 작동하는 것 같습니다.

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

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

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

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

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

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

참고

 

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

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우�

avada.tistory.com

 

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

상황에 따라 텍스트 라인 수를 줄이고 싶은 경우가 있습니다. CSS로 텍스트 라인 수 제한하는 방법을 사용하면 비록 제약이 있지만 제일 간편한 것 같습니다. 목차 CSS로 텍스트 라인 수 제한하기

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    공수래공수거

    CSS는 배우질 못해 잘 모르는거라서 그냥 고개만 끄떡이고
    갑니다^^