Eun_Frontend
  • [CSS] aspect-ratio에 대해 알아보자! [6/6 study]
    2024년 06월 06일 16시 13분 32초에 업로드 된 글입니다.
    이 글은 2024년 06월 14일 06시 38분 56초에 마지막으로 수정되었습니다.
    작성자: 동혁이

     

     

    aspect-ratio에 대해 알아보자!

     

     

     

     

    ❗️aspect-ratio란?

    - aspect ratio(종횡비)는 요소의 크기를 비율대로 조정할 수 있게 한다.

     

    ❗️사용법

    ❗️1. width/height 지정할 때!

    - /를 이용하여 width/height 비율을 지정할 수 있습니다

     

    예시

    .box {
    width: 100px;
    aspect-ratio: 2 / 1; /* 100px, 50px */
    }

     

    해석

    width를 100px;

    aspect-ratio: 2/1; 2대1 비율이므로 width는 100px이고 height는 50px이다!

     

    ❗️2. 한 개의 값만 지정할 때!

    - 앞에 width/height를 지정할때와 비슷하다

    - 하나의 값만 지정하면 height를 1로 간주한다

     

    ❗️3. auto, / 두개 동시에 사용할 때!

    - 이 경우에는 요소가 고유한 종횡비를 가지는 경우 해당 종횡비를 따르지만, 만약 그렇지 않은 경우 지정한 비율을 따른다.

     

    예시

    body {
    display: flex;
    gap: 20px;
    }
    .box-1 {
    width: 100px;
    aspect-ratio: auto 1/1;
    background: orange;
    }
    .box-2 {
    width: 100px;
    aspect-ratio: auto 1/1;
    }
    .box-3 {
    width: 100px;
    aspect-ratio: 1/1;
    }

     

    결과

     

    ❗️의문

    aspect-ratio 속성은 너무 유용하다! 그런데 이미지에 aspect-ratio를 지정하면 이미지가 깨지던데 이 경우에는 어떻게 해야할까?

     

    해결방법

    - 이미지 깨짐을 방지하면서 종횡비를 지정하고 싶다면, object-fit 속성을 같이 써보자 

    - img의 부모에 aspect-ratio를 지정하고, img에 object-fit: cover를 하면 이미지가 깨지지 않으면서 원하는 종횡비로 지정할 수 있다.

    (부모, 자식에 지정해야 할 속성 주의!!)

     

    예시코드

    .parent {
    width: 300px;
    aspect-ratio: 3 / 1;
    border: 4px solid red;
    }
    .img {
    display: block; /*img default display - inline-block*/
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

     

    ❗️주의!

    aspect-ratio가 적용되지 않는 상황들

     

    1. 너비 높이가 지정된 경우

    - 요소의 너비와 높이가 지정된 경우, aspect-ratio는 반영되지 않는다.

     

    2. min-xxx 가 지정된 경우

    ex) min-height, min-width을 지정을 같이 하면 예상치 못한 결과가 나올 수 있다.

     

    3. 내용이 요소를 넘는 경우

    - 요소의 내용이 너무 길면, 요소는 확장되는데 이 경우에는 종횡비가 적용되지 않는다.

     

    ❗️참고자료

    https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

     

    aspect-ratio - CSS: Cascading Style Sheets | MDN

    The aspect-ratio CSS property allows you to define the desired width-to-height ratio of an element's box. This means that even if the parent container or viewport size changes, the browser will adjust the element's dimensions to maintain the specified widt

    developer.mozilla.org

     

     

    🔥마무리

    공부를 하면서 aspect-ratio를 적용해보는 경우가 생겨서 열심히 공부해서 포스팅 해보았다!

    오늘도 화이팅!!

     

    댓글