element의 종횡비 유지

🚩 기존 애니카드 디자인

기존 애니카드는 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에서는 사용할 수 없습니다!

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

 

🚩 참고

• https://velog.io/@jsk3342/%EC%95%84%EB%8B%88-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B9%84%EB%94%94%EC%98%A4-%EB%A7%8C%EB%93%9C%EB%8A%94%EB%8D%B0-padding-top%EC%9D%84-%EC%99%9C-%EC%93%B0%EB%8A%94%EA%B1%B0%EC%95%BC
• https://ddd120.tistory.com/m/2