HTML & CSS

element의 종횡비 유지

presentKey 2023. 11. 24. 00:54

🚩 기존 애니카드 디자인

기존 애니카드는 width: 100%, height: 152px 고정되어 있어서 부자연스러운 이미지를 가지고 있었습니다.

기존 애니카드

🚩 변경된 애니카드 디자인

위 문제를 해결하기 위해 element의 종횡비를 유지하는 방향으로 디자인이 변경되었습니다.

 

 

🚩 종횡비 유지 1: padding-bottom 활용

  • HTML
    • <Image /> 이미지 element
    • 이미지를 감싸는 <div className='image-container' /> element
 <AnimeCardContainer>
   <div className="image-container">
     <Image className="image" image={thumbnail} />
   </div>
   ... // 생략
 </AnimeCardContainer>
  • CSS
    • .image-container
      • padding-bottom: 70%는 부모 width의 70% 비율을 height로 가집니다.
      • padding-bottom: 100%는 부모 width의 100% 비율을 height로 가지기 때문에 정사각형이 됩니다.
    • .image
      • padding에 밀려있는 이미지를 보이기 위해 position: absolute를 합니다.
    • 비율 계산
      • 세로/가로 * 100
export const AnimeCardContainer = styled.div<Pick<AnimeCardProps, "display">>`
  width: calc(50% - 4px);
  &:nth-of-type(odd) {
    margin-right: 8px;
  }

  & .image-container {
    position: relative;
    width: 100%;
    padding-bottom: 70%; // 부모 width의 70%를 height로 가짐
  }

  & .image {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  /* media-query md 사이즈 이상 */
  ${({ theme }) => theme.mq("md")} {
    width: calc(33% - 4px);
    &:nth-of-type(odd) {
      margin-right: 0;
    }
    &:not(:nth-of-type(3n)) {
      margin-right: 8px;
    }
  }
`;

 

🚩 종횡비 유지 2: aspect-ratio 활용

aspect-ratio를 사용하면 위 방법보다는 간편하게 구현할 수 있지만, IE에서는 사용할 수 없습니다!

 

🚩 참고