मैं शायद थोड़ा सा दुर्लभ हूं कि मुझे उत्तरदायी छवियों पर ध्यान रखने की कोशिश करने में मज़ा आया। यह एक दिलचस्प समस्या है जिसने बहुत सारे दिलचस्प समाधानों को जन्म दिया है। पूरी बात अब शुरू हो रही है, हालांकि, अब यह है कि आधिकारिक समाधान हैं:
और मित्रों
कहें कि हम 1x स्क्रीन पर हैं। क्योंकि हमने बताया है कि हम उन ब्राउज़र का उपयोग करने जा रहे हैं, जो बड़े पैमाने पर संभवत: हम (100% व्यूपोर्ट) कर सकते हैं, "ब्रेकप्वाइंट" के लिए जब ब्राउज़र बाहर फ्लिप करेगा छवियों 1280px, 640px, पर होगा और 320 पीएक्स, जैसा कि हमने बताया है कि यह चित्र हैं।
यदि हम 2x स्क्रीन पर हैं, तो "ब्रेकप्वाइंट" आधे में कट जाएंगे (चाहे हम वास्तव में उन छवियों को आकार देने के लिए क्या करें) और 640px, 320px और 160px पर होंगे।
अब हम कहते हैं कि हम समान छवियों का उपयोग करते हैं, लेकिन हम अपने पृष्ठ लेआउट के बारे में बहुत कुछ जानते हैं, और इस तरह से कुछ का उपयोग करते हैं:
यहां हम कह रहे हैं (
sizesविशेषता के साथ ), अगर व्यूपोर्ट 500px या उससे छोटा है, तो हम छवि को 250px चौड़ी प्रदर्शित करने का इरादा रखते हैं। यदि व्यूपोर्ट इससे अधिक चौड़ा है, तो छवि को 500px चौड़े पर प्रदर्शित करें।यह सीएसएस के साथ इस तरह मेल खाता है:
img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )1x स्क्रीन पर, व्यूपोर्ट 500px चौड़ा या छोटा होने पर आपको हमेशा 320w (छोटी) छवि मिलेगी, और व्यूपोर्ट बड़ा होने पर आपको हमेशा 640w (मध्यम) छवि मिलेगी। आपको बड़ी छवि कभी नहीं मिलेगी, क्योंकि यह बता सकता है कि आपको कभी भी कई पिक्सेल की आवश्यकता नहीं होगी।
Ona 2x स्क्रीन, आपको हमेशा 640w (मध्यम) छवि मिलेगी जब व्यूपोर्ट 500px चौड़ा या छोटा होता है (क्योंकि यह सोचता है कि इसे 500px पिक्सेल की आवश्यकता है और छोटा 320px में पर्याप्त नहीं है), और आपको हमेशा यह दृश्य मिलेगा 1280w (बड़ी) छवि जब व्यूपोर्ट बड़ा होता है। आपको छोटी छवि कभी नहीं मिलेगी, क्योंकि आपने जो बताया है, उसे कवर करने के लिए कभी भी पर्याप्त पिक्सेल नहीं है, आप छवि को प्रस्तुत करना चाहते हैं।
वास्तविक आकार
याद रखें कि छवि का वास्तविक आकार अभी भी आपके ऊपर है। मुझे लगता है कि आप इसे सीएसएस के माध्यम से कर रहे हैं। और CSS हमेशा जीतता है। आप जो घोषणा करते हैं, उसमें छवि की प्रदान की गई चौड़ाई होगी, चाहे जो भी हो
srcsetऔरsizesसामान के साथ हो। यह सिर्फ यह बताता है कि कौन सी छवि दिखाई जाएगी।यह वह है जो आकार को थोड़ा कठिन बनाता है। मान लीजिए कि आपके पास कुछ ऐसा है:
.container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )यह बिल्कुल भी असामान्य नहीं है। तो अब आप
sizesविशेषता में किस आकार का उपयोग करते हैं ? यह 13.33% होगा (उन सभी को एक साथ गुणा करें) क्योंकि उस नंबर को व्यूपोर्ट के सापेक्ष होना चाहिए, कंटेनर को नहीं। और यह उन कंटेनरों पर मार्जिन और पैडिंग और सामान को ध्यान में नहीं रखता है, इसलिए यह एक अनुमान है। मुझे लगता है कि घोड़े की नाल, हाथ हथगोले और आकार विशेषता में करीब मायने रखता है।फिर कहते हैं कि एक मीडिया क्वेरी साथ आती है और शरीर वास्तव में 75% चौड़ा हो जाता है। आपको यह जानने की आवश्यकता है कि आप क्या समायोजित कर सकते हैं जो आपको लगता है कि छवियों का प्रदान किया गया आकार होगा। आपकी आकार विशेषता बन सकती है:
sizes="(min-width: 500px) 8%, 13.33%"उसके बाद फिर से उस हर लेआउट मीडिया क्वेरी के लिए जाएँ जो आपके पास है जो सामग्री छवियों को प्रभावित करती है। यह थोड़ा जटिल हो सकता है।
व्यावहारिक आकार?
मुझे संदेह है कि अधिकांश वास्तविक दुनिया उपयोग कुछ का उपयोग करेगी:
यह मानते हुए कि सामग्री चित्र बड़ी स्क्रीन पर ब्राउज़र विंडो के आधे आकार और छोटे स्क्रीन पर ब्राउज़र विंडो के पूर्ण आकार में होंगे - बस ब्रेकपॉइंट्स को होने दें जहां वे होते हैं। आप अभी भी इस तरह से अपने सभी मीडिया प्रश्नों को पूरी तरह से दूर करने के बिना एक सुंदर सभ्य विकल्प प्राप्त करेंगे।
और याद रखें कि ये कंटेंट इमेज हैं। HTML सीएसएस या JS की तुलना में अधिक समय तक टिकता है, विशेष रूप से जब यह सामग्री हो।
जानने के लिए अन्य बातें
आप यह भी निर्दिष्ट कर सकते हैं कि srcset के साथ कोई चित्र 2x या 1x है। तो वास्तव में सरल उपयोग मामला हो सकता है:
यह अकेला बहुत उपयोगी है। इसे निर्दिष्ट चौड़ाई के साथ न मिलाएं। जैसा कि एरिक पोर्टिस कहते हैं:
और फिर से मुझे इस बात पर ज़ोर देना चाहिए कि जब आप विवरणकों के
srcsetबजाय स्रोतों के लिए 1x / 2x रिज़ॉल्यूशन के डिस्क्रिप्टर संलग्न कर सकते हैंw, तो 1x / 2x और w मिक्स न करें। एक ही दोनों का उपयोग न करेंsrcset। सच में।और याद रखें जब मैंने कहा था कि मूल पिक्चरफिल आसान था? नया
इतना आसान हो सकता है, लेकिनअंदर के तत्वभी समर्थन करते हैंsrcsetऔरsizes। इसका मतलब है कि आप बहुत विशिष्ट प्राप्त कर सकते हैं। यह इसमें एक और परत जोड़ता है:- आप तय करें कि
लिंक
- मार्टिन वुल्फ का लेख जिसने इसे प्रेरित किया
- पिक्चरफिल वह पॉलीफिल है जिसका आप उपयोग करना चाहते हैं।
- टिम राइट द्वारा पिक्चरफिल 2.0 पर स्मैशिंग मैगज़ीन लेख
- एरिक पोर्ट्स पर श्रीसेट और आकार क्यों मौजूद हैं और यह मीडिया के सवालों से बेहतर है
- नए के बारे में अधिक के साथ एरिक पोर्टिस
CodePen पर Chris Coyier (@chriscoyier) द्वारा पेन सरकसेट और साइज़ टेस्टकेस देखें।
- आप तय करें कि