데스크톱과 모바일 모두에서 이 기능을 단일 피처드 토픽(single featured topic)으로 작동하게 하려고 합니다.
CSS는 이를 위해 특별히 설계되지 않았지만, 아래 코드를 이용해 이미지를 전체 폭에 걸쳐 잘 보이도록 해킹했습니다:
.featured-topic-wrapper .featured-topics .featured-topic {
max-width: none !important;
.featured-topic-image {
max-width: 800px !important;
width: 100%;
}
}
하지만 화면 너비 변경이나 모바일 환경에서는 반응형 처리가 잘 되지 않고, 종횡비(aspect ratio)가 깨집니다(종횡비는 유지하고 싶습니다). 적절한 크기의 이미지를 선택하고 높이를 하드코딩하는 방식으로 임시 해결했습니다.
반응형으로 만들기 위해 간단히 적용할 수 있는 변경 사항이 있을까요? 또한, 단일 피처드 토픽이라는 사용 사례에 더 잘 맞도록 이 컴포넌트의 CSS를 조정하는 것이 가치가 있을까요?