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
- .image-container
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://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