問題タブ [responsive-images]

私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に100％の幅になる製品の画像があります（デザインは常に端から端まで行くことを示しています）。画面の幅に応じて、画像の高さは明らかにそれに応じて調整されます。私はもともとimg（CSS幅100％）でこれを行いましたが、うまく機能しましたが、メディアクエリを使用して、さまざまな解像度に基づいてさまざまな画像を提供したいと考えています。たとえば、同じ画像の大きなバージョン。CSSでimgsrcを変更できないことはわかっているので、HTMLのimgタグではなく、画像にCSSの背景を使用する必要があると考えました。

背景画像を含むdivは、背景を表示するために幅と高さの両方を必要とするため、これを正しく機能させることができないようです。明らかに「幅：100％」を使用できますが、高さには何を使用しますか？150pxのようなランダムな固定高さを設定すると、画像の上部150pxが表示されますが、固定高さがないため、これは解決策ではありません。私は遊びをして、高さがあれば（150pxでテスト）、「background-size：100％」を使用して画像をdivに正しく合わせることができることを発見しました。このプロジェクトでは、モバイルのみを対象としているため、最新のCSS3を使用できます。

以下に大まかな例を追加しました。インラインスタイルを失礼しますが、質問をもう少し明確にするための基本的な例を示したいと思います。

コンテナdivにページ全体に基づいてパーセンテージの高さを指定する必要があるのでしょうか、それともこれを完全に間違って見ているのでしょうか。

また、CSSの背景がこれを行うための最良の方法だと思いますか？たぶん、デバイス/画面の幅に基づいて異なるimgタグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな商品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。

申し訳ありませんが、これは少し時間がかかりますが、このプロジェクトから次のプロジェクトに行ったり来たりしているので、この小さなことをやり遂げたいと思います。よろしくお願いします。よろしく

私は、タグを使用srcsetしsizesて頭を包み込もうとしているところです。img

主にこの記事のおかげで、基本は理解できたと思いますが、sizes属性の実際の適用には苦労しています。

私が見つけることができるすべての例では、物事は大幅に単純化されており、サイズ属性は、各ブレークポイントで画像の幅がビューポートの幅の正確な比率になるように宣言されており、vm単位を使用できます。例えば：

もちろん、実生活では、画像自体が他のコンテナー内にあることが多い他のコンテナー内にあり、それぞれに独自のマージン、パディング、または配置があります。

最も単純なケース (画像の幅が流動的で、ビューポートの正確なパーセンテージではない場合) を除いて、calc使用する必要があると言っても過言ではありません。ビューポートの幅から、コンテナを介して画像まで計算されますか? たとえば、メイン ページ コンテナーの 25% であるサイドバーの内側にある 15px の余白を持つコンテナーの 45% のコンテナー内にある 7px のパディングを持つコンテナーにある画像の正しいサイズをどのように計算しますか? 15px のパディングと 1220px の最小幅がありますか?

サイズ属性でこれを計算しようとするのはばかげているように思えます。特に、これらすべてが各ブレークポイントで変更される可能性があることを考えると。この非常に複雑な計算を CSS の変更と同期させなければならないことは、狂気のように思えます。そして、パッチのブラウザサポートがありcalcます.

明らかな何かが欠けているように感じますが、それは何ですか?

注: 属性を使用してサイズの計算を行うAlexander Farkas の優れたLazy Sizesdataは知っていますが、標準的な使用方法に興味があります。

だからこれは私を殺しています。

多くのフォーラムを見てきましたが、解決策が見つからないようです。

基本的に、フローティング要素のグリッドがあり、それぞれにサムネイル画像があり、ホバーすると、そのギャラリーに含まれるもののオーバーレイとテキストの説明があります (これは典型的なフォリオ サイトです)。

通常、各画像と同じサイズのオーバーレイボックスと、ホバー時にオンとオフを切り替える同じ幅のテキストコンテナーを備えた固定レイアウトがあります。しかし、これはサイトの最初のレスポンシブ バージョンであり、オーバーレイとテキストのサイズを親のサイズと一致させる方法がわかりません。

それらをすべて div でラップしようとしましたが、子要素はとにかく親の次元を無視しているようです - おそらくそれらが浮かんでいるためです。

問題のサムネイル画像にはコメントが付いていますが、それ以外は完全に機能します。

1 つの div を別のレスポンシブ img の幅と一致させる方法はありますか? どんな助けでも大歓迎です。

これが私のhtmlです

これは私のCSSです

背景画像付きのレスポンシブ ヘッダーを作成しようとしています。オフキャンバス メニューのハンバーガー アイコンを追加すると、ビューポートの上部に体の背景の帯が表示されます。

私は何を間違っていますか？

このWeb アプリには Bootstrap v3.3.5 カルーセルを使用しています。画像のサイズは 970x180 に固定されているため、カルーセルのサイズも修正しました。

ただし、スマートフォンからこのアプリを閲覧すると、画像が適切にリサイズされず、画像の半分しか表示されません。

ここに何か提案はありますか？

各行が同じ高さで幅が異なる可能性のある任意の数の画像である画像のグリッドを作成したいと考えています。また、ブラウザの幅が変わると、全体が拡大縮小する必要があります。

これまでに思いついた最善の解決策は次のとおりです。

そしてCSS：

これに関する主な問題は、同じ行の画像の幅が異なる場合、それらの高さがすべて同じではなく、パディングが不均一であるため見栄えが悪いことです。すべての画像がまったく同じサイズである場合、または CSS で padding-right を 0 に設定した場合、問題なく動作します。

これに関するもう 1 つの問題は、各画像のパーセンテージを計算する必要があり、少し時間がかかることです。

もう 1 つの問題は、画像の下部に 4 ピクセルのパディング/マージンがあり、それを取り除くことができないことです。

これを行う最善の方法は何ですか？これらの問題のいくつかを修正するために行うことができるわずかな変更はありますか、それとも完全に異なる構造を使用する必要がありますか?

上記のコードが生成するもののスクリーン ショットを次に示します。

2 行目の画像の高さがすべて同じではないことがわかります。

レスポンシブ画像機能にはpicturefill.jsを使用しています。高さと幅を指定せずに元の画像を配置すると、画像が<picture>タグに表示され、画面サイズに応じて同じ画像の異なるサイズが表示されます。

しかし、高さと幅を指定すると、レスポンシブ機能が機能しません。画像は<img>タグ付きで読み込まれます。

ここにリンクがあります

私が知る限り、属性srcsetとsizes属性は、デバイスのサイズと解像度に合わせて適切にスケーリングされた画像を適用することに重点を置いています。

これらの属性を使用して、画面サイズに基づいて別の画像を選択する機能はないようです。

これは状況の正しい理解ですか？pictureこれは、要素がこのタスクで広くサポートされるまで待たなければならないということですか?

ここ数日間、この問題を調査しており、静的レイアウトでうまく機能するいくつかの解決策を見つけましたが、レスポンシブ デザインでの解決に問題があります。

ホームページで使用する一連のバナー画像があり、小さなモバイル画面でテキストの背後にある画像の中央に表示されるようにしています。固定幅でこれを解決できますが、これをレスポンシブにする必要があります。

私の CSS コードの現在のレンディションは次のようになります。

課題は左への移動のようです。現在、画像は画像幅の 50% だけ左にシフトしています (驚くことではありません)。ネストされた div タグで画像を中央に配置するのに必要な量だけ画像をドリフトするように CSS をプログラムするにはどうすればよいですか?

よろしくお願いします。