मैं वास्तव में अब इसकी आवश्यकता नहीं है, लेकिन सिर्फ जिज्ञासा से बाहर के साथ स्केलिंग ...छवि सीएसएस
मान लीजिए हम चाहते हैं कि पूरी तरह से 1920px प्रदर्शित करता है पर और छोटे स्मार्टफोन्स पर अच्छी तरह से काम एक द्रव वेबसाइट लेआउट है। अब मान लें कि हमारे पास छवियां हैं और जाहिर है (जाहिर है?) हम उन्हें स्केल करना चाहते हैं। हम एक सर्वर पर 2560px छवियों अपलोड कर दिया है (क्योंकि जो बैंडविड्थ के बारे में आजकल परवाह करता है) और img टैग करने के लिए width: 100% गुण सेट।
तो हमारे पास दो उपयोगकर्ता हैं: 1920 पीएक्स डिस्प्ले वाले प्रोग्रामर, चलो उसे जो कहते हैं, और स्मार्टफोन के साथ एक महिला छात्र, चलिए उसे नैन्सी कहते हैं (क्योंकि नैन्सी के साथ सब कुछ बेहतर है, है ना?)।
जो और नैन्सी खुश हैं क्योंकि width: 100% का उपयोग करके छवियों के स्केलिंग के साथ हमारी योजना काम करती है, लेकिन क्या होगा यदि हमने छोटी छवियों को 400px चौड़ाई की तरह कुछ भी दिखाने का फैसला किया? नैन्सी कुछ भी नहीं देखेंगे, लेकिन जो के लिए यह एक आपदा होगी।
तो सवाल यह है: हम जो और नैन्सी खुश कर सकते हैं जावास्क्रिप्ट का उपयोग किए बिना?
उन्हें खुश करने के रूप में क्या योग्यता प्राप्त करता है? इसके अलावा, स्मार्टफोन में 2560 पीएक्स छवियों की सेवा करना एक भयानक विचार है। –
वे खुश होंगे अगर हमारी छवि नैन्सी के स्मार्टफ़ोन पर स्केल करेगी और जो स्केलिंग के बिना 400px छवि देखेंगे। –
क्या आपका मतलब है कि आपने '
' में छवि की चौड़ाई विशेषता 100% पर सेट की है? –
MrMisterMan