प्रोजेक्ट लोड करने वाले आकार और आकार के साथ Img

Question

मैं एक ऐसे पृष्ठ को अनुकूलित करने की कोशिश कर रहा हूं जिसमें ब्रेकपॉइंट्स वाली छवियों का ग्रिड होता है जो इसे 1, 2, 3 या 4 कॉलम का उपयोग करता है।

एचटीएमएल इस तरह दिखता है:

<img srcset=" image-300x200.jpg 300w, image-original.jpg 600w" sizes=" (min-width: 1px) calc(100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) calc(100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) calc(100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) calc(100vw * (0.94 * 0.835) * 0.25), 280px" alt="E-Books customer service for Dutch Libraries" width="400" height="284">

calc() फ़ंक्शन थोड़ा जटिल लग सकता है लेकिन मैं उन्हें विभिन्न व्यूपोर्ट चौड़ाई के साथ परीक्षण किया गया और उसके बाद ब्राउज़र में छवि का आकार की पुष्टि कर लें और गणित जांचता है।

पूर्णता के लिए, यहाँ यह क्या करता है:

[viewport width] - [94% container width] - [column gutters]/[nr of columns]

लेकिन जो कुछ भी मैं कोशिश, क्रोम (लगभग, Yay स्थिरता के लिए) हमेशा बड़ी छवि का चयन करता है स्क्रीन पर img के आकार में अच्छी तरह से है, तब भी जब 300px से नीचे। मैंने डेवलपर टूल्स> इंस्पेक्टर> गुण> आईएमजी> currentsrc में this answer

क्या कोई मेरी मदद कर सकता है?

Answer 1

मुझे लगता है कि मैंने इसे समझ लिया। ऐसा लगता है कि मीडिया प्रश्नों की अपेक्षा नहीं है जैसा कि मैंने उम्मीद की थी।

उदाहरण के लिए, इन नियमों के साथ:

sizes=" (min-width: 1px) ... (min-width: 480px) ... (min-width: 768px) ... "

एक ग्रहण करेंगे कि

• लाइन # 1 से सच है जब स्क्रीन> 1px विस्तृत
• लाइन # 2 से सच है जब स्क्रीन है > 480 पीएक्स, ओवरराइडिंग लाइन # 1
• लाइन # 3 सत्य है जब स्क्रीन> 768 पीएक्स, ओवरराइडिंग लाइन # 1 और # 2

यह कम से कम अभ्यास में नहीं है, यह काम नहीं करता है। मुझे लगता है कि ब्राउज़र सिर्फ एक नियम की तलाश करता है जो सत्य का मूल्यांकन करता है और इसे एक दिन बुलाता है।

तो यह सिर्फ जाता है:

• लाइन # 1 सच है! किया हुआ! नियम लागू करना! आसान!

जब मैं अपने नियमों को देखा और इसे ध्यान में तर्क के साथ परिणाम है, यह अचानक भावना बनाया है कि ब्राउज़र सबसे बड़ी छवि का उपयोग कर calc() फ़ंक्शन मैं पहली पंक्ति के लिए उपयोग है, क्योंकि पर जोर दिया:

calc(100vw * (0.94 * 1.0) * 1.0) - जो windowWidth * 0.94 लिखने का एक जटिल तरीका है।

दूसरे शब्दों में, ब्राउज़र मानता है कि छवि विंडो की पूरी चौड़ाई का हमेशा 9 4% है और ब्रेकपॉइंट्स को खाते में ले जाने वाली अन्य गणनाओं में से कोई भी लागू नहीं होती है।

वैसे भी, यह करने के लिए उपरोक्त नियमों को बदलने:

sizes=" (min-width: 1px) and (max-width: 479px) ... (min-width: 480px) and (max-width: 767px) ... (min-width: 768px) and (max-width: 980px) ... "

सुनिश्चित करें कि नियम केवल एक निश्चित बिंदु तक लागू होता है बनाता है।हर बार अगली पंक्ति सही के रूप में मूल्यांकन करती है, अन्य लाइनें नहीं होती हैं।

तो यह है कि मैं क्या अंत में साथ चला गया है:

<img src="image-fallback.jpg" srcset=" image-300x200.jpg 300w, image-480x320.jpg 480w, image-600x400.jpg 600w, image-960x640.jpg 960w, image-1200x800.jpg 1200w" sizes=" (min-width: 1px) and (max-width: 479px) calc( 100vw * (0.94 * 1.000) * 1.00), (min-width: 480px) and (max-width: 767px) calc( 100vw * (0.94 * 0.905) * 0.50), (min-width: 768px) and (max-width: 980px) calc( 100vw * (0.94 * 0.850) * 0.33), (min-width: 981px) and (max-width: 1088px) calc( 100vw * (0.94 * 0.835) * 0.25), (min-width: 1089px) calc(1089px * (0.94 * 0.835) * 0.25), 280px" />

और यहाँ से ऊपर की एक काम उदाहरण है: Image srcset example (working)

नोट: ब्राउज़र एक बार एक बड़ी छवि लोड हो जाए, छोटे लोड करने में अनिच्छुक है। यही है कि 'फोर्स रीफ्रेश' बटन के लिए है।

नोट # 2: डिबगिंग के लिए मैंने अपने मूल प्रश्न की तुलना में अधिक स्रोत छवियों को जोड़ा। मैंने सोचा कि इसे दो आकारों से सरल रखना आसान होगा, लेकिन मुझे लगता है कि अगर मैंने गुच्छा नहीं जोड़ा होता तो मुझे कभी यह पता नहीं लगा होता। जब मेरे पास केवल 2 छवियां थीं, मैंने सोचा कि यह हमेशा सबसे बड़ा चुना जाता है। यह सच नहीं है, मैंने कभी भी अपेक्षित छवि को कभी नहीं चुना;)