問題タブ [responsive-images]

レスポンシブ画像を配信するようにpicturefill.jsをセットアップしようとしています。src 属性の代わりに srcset 属性を使用して二重ダウンロードを回避すると、picturefill.js が正しい画像をレンダリングする前に、デフォルトの画像の代替テキストが一貫して表示されます。

これが既知の問題であり、回避策があるかどうかは疑問です。私がテストした 3 つのデバイスのうち、picture 要素を完全にサポートしていないデバイスは 1 つだけです (src 属性を使用すると、二重ダウンロードが発生します)。つまり、高速の iPhone 6 です。私の低速の iPhone 4 と iPad 1 には代替テキストが表示されますが、表示されていないように見えるのは単にデバイスの速度なのかどうか疑問に思っています。

人々がpicturefill.jsの使用に関して話しているのを見た唯一の本当の欠点は、二重ダウンロードを避けるためにsrc属性を省略し、javascriptを持たないものをデフォルトの画像代替テキストのままにしておくことです.tempについては何もありません。スクリプティングが終了している間の代替テキストのレンダリング。これは、二重ダウンロードとほぼ同じかそれよりも悪いように見えます。

2 つの 50% 幅の div があります。1 つは単純な画像で、もう 1 つは YouTube の埋め込みです。

私が達成したいのは、両方の要素（画像とビデオ）の高さを同じにすることです。これがレスポンシブでも同じように機能する必要があります。

動画の埋め込みにhttp://embedresponsively.com/ cssを使用しようとしましたが、正しく機能させる方法がわかりません。

これが私がやりたいことです：

これは私のjsfiddleです：

https://jsfiddle.net/ujddekdf/

この質問は、次の質問のバリエーションです: Is it possible to recalculate the `srcset` image used if browser window is resized?

基本的に、私のサイトでは複数の画像を含む動的a.class imgスライダーを使用しています。ID ではなく、say でのみ画像をターゲットにできます。さらに、変更する a.class を持つ複数の img があります。

jQuery または通常の JavaScript を使用して、ブラウザー ウィンドウのサイズが変更されたときにブラウザーを新しい srcset に更新するにはどうすればよいですか? できれば、ウィンドウがいくつかのトリガーポイントを超えてサイズ変更された場合にのみ、これを実行したいと思います。たとえば、幅ポイント1170pxと1000pxです。

質問を別の言い方をすると、jQuery を使用して srcset をアート ディレクションのように機能させる方法はありますか? <picture>代わりに要素または代替を使用できません。

したがって、各画像は次のコードでラップされます。

(このコードは複数の面で繰り返されます)

助けてくれてありがとう！

いくつかの画像に特定のレイアウトを作成しようとしています。作りたいレイアウト。

小さい画像を大きな画像の横に並べて配置しようとしましたが、これは clearfix を追加すると機能しますが、何らかの理由で画像に適用した幅が有効ではなくなりました。つまり、適切な位置にある大きな画像か、あちこちにある小さな画像のどちらかです。

すべての画像を個別の div タグに入れ、次に親 div に入れてみましたが、それには独自の問題があります。

これは HTML と CSS で行うことができますか、それとも jQuery ルートをたどる必要がありますか?

私はコードを整理します。頭の中に正しく入れようとしているだけです。

HTML:

CSS:

https://jsfiddle.net/apdeng/wyvzmm9q/1/

前もって感謝します。

ロゴ画像は 2 倍に縮小され、設定されたピクセル幅と高さで縮小されます。ぼやけた画像ではなく、よりきれいな画像が必要です。ロゴはまだ Outlook の元のサイズです。

これを独自のテーブルで設定されたピクセル幅にラップする必要がありますか? 特定のクラスを設定する必要がありますか? このコードをクリーンアップしてより効率的に動作させるにはどうすればよいですか?

スタイル - ロゴにはクラスがありません....

水平に配置された div に 3 つの画像があります。ページのサイズを変更すると、画像の位置が変更され、垂直方向の配置で浮きます。また、ページの他の div に他の画像を配置する必要があります。画像を下側に配置したいのですが、助けてください。これがコード例です。

強いテキスト

calc(.333 * (100vw - 12em))HTML の次の行の意味を誰か説明してもらえませんか? 特に .333 値。それはどこから来たのですか？

http://ericportis.com/posts/2014/srcset-sizes/から取得

長さはいろいろあります！長さは、絶対 (例: 99px、16em) または相対 (この例のように 33.3vw) にすることができます。この例とは異なり、絶対単位と相対単位の両方を組み合わせたレイアウトがたくさんあることに気付くでしょう。そこで、驚くほどよくサポートされている calc() 関数の出番です。3 列のレイアウトに 12em のサイドバーを追加したとしましょう。次のようにサイズ属性を調整します。

私はこれをよく理解しています：

• (最小幅: 36em) = メディアクエリ
• calc(.333 * (100vw - 12em)) = レンダリングされた画像サイズ
• 100vw = デフォルトのレンダリング イメージの長さ