ホームページ機能

シングルフィーチャードピックとして、デスクトップとモバイルの両方でうまく表示させようとしています。

このCSSは本来の目的には適していませんが、画像が全幅にきれいに表示されるように、次のようにハックしています:

.featured-topic-wrapper .featured-topics .featured-topic {
    max-width: none !important; 
    .featured-topic-image {
    max-width: 800px !important; 
    width: 100%;
    }
}

しかしながら、画面幅の変化やモバイル対応にはあまり柔軟でなく、アスペクト比が崩れてしまいます(これを維持したいです)。適切なサイズの画像を選び、固定の高さを設定することで回避しています。

レスポンシブにするために、簡単にできる変更はありますか?また、単一のフィーチャードトピックのユースケースにより適したCSSの微調整は価値があるでしょうか?

「いいね!」 3