問題タブ [responsive-images]

そのため、この一連のコードにしばらく苦労しており、完成に近づいています。

最初の問題は、画像を高さと幅に反応させることでしたが、いくつかの議論の後、コードを簡素化し、色をプレースホルダーとして使用することで反応させる方法を理解することができましたが、今では再追加する方法がわかりません.背景画像。

これがOGコードペンです。http://codepen.io/anon/pen/YypXjw

そして今ここにあります、http://codepen.io/anon/pen/rOWXzW

htmlも表示できない理由がわかりません。

コードがクリーンアップされたので、あとはフリップ div に表と裏の画像を追加する方法だけです。

og コードのように前後の div を追加しようとしましたが、まだ機能しません。

どんな助けや提案も大歓迎です。

さまざまな画像とさまざまなサイズの画像ギャラリーを作成しようとしています。私が欲しいものを説明するために、画像へのリンクを含めました。それぞれが画像を含む4つのdivで行を作成しました。画像には幅と高さがあります。しかし、私の画像にはさまざまなサイズがあります。つまり 600X500 です。ブートストラップを使用しています。

画像を div 全体 (400 X 400) に表示し、応答性を維持するにはどうすればよいですか?

画像の高さと幅を固定しようとしましたが、画像が反応しなくなりました。

CSS

これは私が作ろうとしているもので、ある種の画像ギャラリーです

ブラウザーが特定の画面サイズに達したときに、srcset 属性を使用して画像を交換しようとしています。画面サイズが幅 768 ピクセルを超える場合にデスクトップ イメージを表示する必要があります。

Firefox を除くほとんどのブラウザで、以下のコードを使用してこれを実現できました。私は「srcset」ゲームにかなり慣れていないので、構文エラーがあるかどうかわかりません。Retina デバイスを念頭に置いて、ここで何が欠けているかを知っている人はいますか? ブラウザの srcset のサポートは適切なようですので、何が原因なのかわかりません。

ブートストラップ 3 の使用は初めてです。絶対位置、上、左の位置を使用しているときに画像をレスポンシブにする方法について助けが必要ですか? 私の画像は 1 つの画像の上にあり、ブラウザーのサイズを変更するたびに、画像はその場所に配置されなくなります (デスクトップ サイズ)。

作成したランディング ページの Bootstrap に問題があります...

次のコードがあります

ブラウザにロードすると完璧に再生されますが、ウィンドウを小さくするなどします。しかし、Samsung Galaxy s5 miniからロードすると、バックグラウンドに応答がありません。背景を途中でカットし、ページの次の半分に白い色を付けます。

更新 1

この問題は、Chrome またはインターネット アプリを搭載した Android スマートフォンでのみ検出されます。

誰かがiPhoneで試してみると、完璧に再生されます!

これはウェブサイトです

http://79.170.44.145/irem.co.vu/test-ptx/index.html

そしてANDROIDの画像がこちら。 iOS iPhone

Android Chrome ブラウザとインターネットも

助言がありますか？

次の問題をどのように解決するのか知りたいです。

Bootstrap 3 を 24 列でグリッドガターを 30px に使用。ワイド ディスプレイでは、左サイドバーに col-7、メイン コンテンツに col-17 を使用します。問題は、ブートストラップがパーセンテージで幅を計算していることです。したがって、サイドバーには 339.5 ピクセル (29.16667%)、コンテンツには 824.484 ピクセル (70.83333%) があります。

現在、lazysizes や lazyspectratio などのスクリプトを使用して写真を遅延読み込みし、画像がまだ読み込まれていない場合でも画像コンテナーを同じサイズに保ちます。lazyspectratio では、高さを再計算して保持するために、幅を 100% にする必要があります。

でも… あるから… メインコンテンツが824.484px幅だと画像も824.484px幅で画質が悪い。私の画像表示が 824px でなければならないと仮定すると、比率が尊重されたとしても、最終的な画像表示はくだらないものになり、品質が失われます。

私の質問は: img > width=100% でこの問題を回避する方法は?

次のように、行の子の幅を「修正」するいくつかのスレッドを見ました。

img > width = 100% を維持し、列幅を整数にするのは良い解決策のようですが、この解決策では、複数の col-* および複数の media-queries を管理するために多くの CSS ルールを追加する必要があります...

あなたも ？この種の問題をどのように解決しますか？width=100% の img-responsive クラスを使用すると、Bootstrap 3 でパーセンテージ ベースの幅の品質が低下すると思うため、この問題に遭遇するのは私だけではないと確信しています。

ご提案いただきありがとうございます。