問題タブ [picturefill]

fill="url(#mobile)"の参照で動作しない<pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%"><image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="123" y="90" /></pattern>

srcsetでおよびsizes属性を使用する際に、いくつかの点で混乱していimgます。( picturefillを使用していますが、元の仕様に従います)

画像があり、大きな画面で25emは幅がありますが、小さな電話画面ではビューポートではなく85%コンテナーです。小さな画面でサイズを設定したくありません。代わりに、コンテナ（. これを行う方法がわかりません。div

また、サイズとメディア クエリを CSS ではなく HTML にハードコードしなければならないことも不満です。同じ情報が 2 つの場所に配置されます。これを回避する方法はありますか？

私が持っているもの：

私が欲しいもの：

pictureを含む要素を使用して、sourceロードする画像を選択しています。loadまた、リスナーを追加することはできますが、imgタグのsrc属性とプロパティが両方とも空であるため、ロードされた場合でも、どのイメージがロードされたかを特定できません!

読み込まれた画像を特定するにはどうすればよいですか?

ステージを設定すると、製品を販売する e コマース プラットフォームになります。その製品の画像は、次のようにサイトのいくつかの場所に存在します

• カルーセルで約 150x150px
• 約 250x250 の商品画像を表示するクイック ビュー
• 製品のサムネイル 80x80 を表示しているその製品のページ
• その製品のページで、その画像のフルサイズを表示する 300x300
• クイックカートでは約65x65
• カートいっぱいで約100x100

これらすべてのスポットで機能する 1 つの画像を提供し、それがキャッシュされることを望みますか、それとも各画像を正確なサイズで提供しますか。

さらにいくつかの状況を考えると、ユーザーが商品でいっぱいのカートを持っていて、サイトを離れて直接カートに戻ってきた場合、大きなカートをロードする必要があるか、ユーザーが数日または数週間離れていて、全体が残っている場合があります。表示する新しい製品セットなので、キャッシュされた画像はもうありません。

最もパフォーマンスの高いソリューションは何だと思いますか?

ap の横に配置されている画像と常に同じ幅と高さを持たせようとしています。

これらの要素を含む div の両方に特定の寸法を設定し、img の幅と高さを 100% に設定します (ここで説明したように)。残念ながら、提供されている実際の画像の寸法を使用しても、画像が歪んでしまいました。ところで、Picturefill を使用していることを忘れていました。おそらく、それと関係があるのでしょう..

ピクチャフィル HTMLのsize属性の値を調整することで、歪みの量をある程度制御することが可能です。ただし、実際にこのように機能させるには、その属性に何千もの異なる値を追加する必要があることが判明しました。このようなものへの正しいアプローチのようには感じられませんでした。

HTML

jQueryを使用して、picture要素内のソースタグのsrcsetプロパティをどのようにターゲットにしますか? 以下の xxxxxxxxxx.jpg と yyyyyyyyyy.jpg の値を変更する正しい jQuery コードは何ですか?

誰かが光を当てることができることを願っています-ビューポートの幅ではなく、ユーザーの操作によって切り替えられる固定の列幅を持つ同位体アイテムがあります。

固定画像幅は 105px、160px、333px、1200px です。

画像の srcsets を使用して、ビューポートではなく画像の幅に基づいてソースを更新したいと考えています。現在、これをトリガーする方法があるかどうか、または代わりに JavaScript を介してこれを行う必要があるかどうかを確認するのが難しいと感じています。

ビューポートに関しては画像のsrcsetsが正常に機能していますが、列が105pxのみで、その幅の5〜12列が画面に収まる場合、ビューポートの幅が原因で1200px幅の画像が読み込まれますが、これは機能ではありません望んでいる、提供していない、そして私が望む貯蓄について。

私は上下に検索しましたが、正しい方向に私を向けるための多くを実際に見つけることができません. どんな助けでも大歓迎です。

私はすでに見回してみましたが、探しているものとまったく同じトピックに関する情報を見つけることができないようです.

Unity3D uGUI に精通している場合は、Objective-C を使用して XCode 内で同じ「塗りつぶし」タイプの画像効果を実現しようとしています。

「文字」の色あせた画像があり、時間が経つにつれて、その「文字」画像を同じ位置の「塗りつぶされた文字」画像で塗りつぶしたいと考えています。どうすればこれを解決できますか?

MGImageResizingUtilities を使用してみましたが、トリミングされた画像が使用されている元の画像と同じサイズではなくなり、スケールがアスペクト比に設定されているため、画像のサイズが変更されるようです。

良い例を見つけるのは難しかったですが、ここに理解を深めるための何かがあります。 http://s22.postimg.org/9qghxosox/Screen_Shot_2016_01_30_at_17_08_06.png

ここに私が使用しようとしているいくつかのコードがあります:

上記のコードで画像を完全に埋めようとした 2 つのスクリーンショットと、画像を部分的に埋めようとした 1 つのスクリーンショットを次に示します (masklayer フレームの高さが -40 に設定されています)。

ありがとうございます