8
「自動」の高さの100％幅の背景画像
私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に100％の幅になる製品の画像があります（デザインは常に端から端まで行くことを示しています）。画面の幅に応じて、画像の高さは明らかにそれに応じて調整されます。私はもともとimg（CSS幅100％）でこれを行いましたが、うまく機能しましたが、メディアクエリを使用して、さまざまな解像度に基づいてさまざまな画像を提供したいと思いました。たとえば、同じ画像の大きなバージョン。CSSでimgsrcを変更できないことはわかっているので、HTMLのimgタグではなく、画像にCSSの背景を使用する必要があると考えました。 背景画像のdivは背景を表示するために幅と高さの両方を必要とするため、これを適切に機能させることができないようです。明らかに「幅：100％」を使用できますが、高さには何を使用しますか？150pxのようなランダムな固定高さを設定すると、画像の上部150pxが表示されますが、固定高さがないため、これは解決策ではありません。私は遊びをして、高さがあれば（150pxでテスト）、「background-size：100％」を使用して画像をdivに正しく合わせることができることを発見しました。このプロジェクトはモバイルのみを対象としているため、最新のCSS3を使用できます。 以下に大まかな例を追加しました。インラインスタイルを失礼しますが、質問をもう少し明確にするための基本的な例を示したいと思いました。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> コンテナdivにページ全体に基づいてパーセンテージの高さを指定する必要があるのでしょうか、それともこれを完全に間違って見ているのでしょうか。 また、CSSの背景がこれを行うための最良の方法だと思いますか？たぶん、デバイス/画面の幅に基づいて異なるimgタグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな製品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。 申し訳ありませんが、これは少し時間がかかりますが、このプロジェクトから次のプロジェクトへと行ったり来たりしているので、この小さなことをやりたいと思います。よろしくお願いします。よろしく