問題タブ [responsive-images]

Responsive filemanager http://www.responsivefilemanager.com を使用しています 複数の画像ファイルを選択したいのですが、設定がわかりません

これは私のコードhtmlです

こんにちは、jQuery サイクルを使用したレスポンシブ イメージ ギャラリーで問題が発生しています。

私のフィドルはこちら - https://jsfiddle.net/qxyodctm/5/

ブラウザーを更新したときにのみ、画像のサイズが変更され、比率が適切に制限されますが、ブラウザーのスケーリングでは、画像が互いに重なり合わず、幅と高さが正しくありません。

誰か助けて？

どうもありがとう

背景画像をレスポンシブにしようとしていますが、デスクトップでは問題なく動作するようですが、モバイルではうまくいきません。上司によると、具体的には iPhone 6 Plus です。

これが私のコードです：

サイトはここにあるので、テストできます：

http://www.breadrails.com

背景: 8 つの画像を一列に並べる Bootstrap 3 の方法

私は今、3つの画像を曲げる方法を知っています:

しかし、私はより小さなWebP代替画像を紹介したいと思います。picture要素でそれを行っていると思います。

ただし、IMG の場合のように、CSS 形式を PICTURE 3 列にする方法がわかりません。私は何が欠けていますか？

流動的な幅のコンテナーに画像の行があり、画像間に固定幅のスペースがあります。コンテナが縮小した場合、画像は流動的にサイズ変更され、コンテナの幅全体に収まる必要があります。

このために、空白を使用しています: nowrap; および表示: テーブル。コンテナとディスプレイ: table-cell; その子に。

ただし、画像はさまざまな要因でスケーリングされているように見えるため、非常に小さい画像もあれば、わずかに小さい画像もあります。比例してスケーリングする必要がありますが、方法がわかりません。どんな助けでも大歓迎です！

HTML:

CSS:

ライブ デモについては、このペンを参照してください: http://codepen.io/anon/pen/PZPjop

プログラマーに自分のサイトのページのコードを書いてもらいましたが、コードを自分のサイト (Shopify で) に移行したときに、いくつかのことが機能しなくなりました。ほとんどすべてを修正できましたが、トップ バナーがまだ問題を引き起こしています。

ブラウザの幅全体を埋めたいのですが（ページの少し下にある他のバナーのように）、幅970pxにクリップされています。これを修正して応答性を高め、ブラウザの幅全体を埋めるにはどうすればよいですか? また、ページ全体をヘッダーの下の中央に配置したいと考えています。

そして、私が使用しているコードはここにあります（重要なものを見逃さないように完全なコードを含めています）：codepen.io/anon/pen/xZZwZN

コードペンで実行すると動作するので、Shopify テーマにコード化されたページ幅が原因でクリッピングされているのではないかと考えています。このページのみでこれを修正/上書きする方法についてのアイデアはありますか?

ここのこのWebサイト が、ウィンドウサイズをonloadで塗りつぶし、ウィンドウのサイズを変更しながら、ウィンドウを元の比率で塗りつぶすレスポンシブヘッダー画像をどのように作成したかを理解しようとしています。

これは私がこれまでに思いついたものですが、非常にグリッチです...

働くフィドル

PHP と一緒にレスポンシブ画像属性「srcset」を使用する方法を探しています。サーバー上のディレクトリからランダムな画像を選択するために、現在次のコードを使用しています。

ディレクトリ内に、接尾辞を付けたさまざまなバージョンの画像を作成しました(つまり、image-1-small.jpg、image-1-big.jpg ... image-2-small.jpg、image-2-big. jpgなど）。

srcset 属性を php 文字列に実装するにはどうすればよいですか? 次のような出力を探しています。

ありがとう！