सीएसएस छवि नये नोट्स से पहले छवि

Question

भरी हुई अपने मोबाइल वेबसाइट के लिए मैं अलग अलग की छवियों, लेकिन ज्ञात ऊंचाइयों/चौड़ाई दो बाधाओं के साथ दिखाना चाहते हैं:

• छवि browserview
• की पूरी चौड़ाई ऊपर लेना चाहिए
  : ऊंचाई बढ़ाया जाना चाहिए (ऊपर या नीचे) तदनुसार अनुपात

जैसे ही ब्राउज़र छवि को डाउनलोड करता है के रूप में रखने के लिए, यह निम्न सीएसएस के साथ वास्तव में आसान है

लेकिन क्योंकि छवि के लोड होने में कुछ समय लगता है, मैं ब्राउज़र छवि लेआउट होने से पहले ही इसके डाउनलोड करना चाहते हैं। तो जब वह छवि प्राप्त करता है, तो ब्राउजर को पृष्ठ को फिर से प्रस्तुत करने की आवश्यकता नहीं होती है। मैंने निम्नलिखित दृष्टिकोणों को आजमाया, जो असफल रहा:

// The image is not layouted before fetched 
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore 
<img src="myImageURl" style="width: 100%; height: myImageHeight;" /> 

मुझे यहां कुछ मदद चाहिए। लेकिन कृपया सीएसएस में, अगर मुझे ऐसा करने की ज़रूरत नहीं है तो मैं जावास्क्रिप्ट/jQuery का उपयोग नहीं करना चाहता हूं।

अद्यतन

मुझे लगता है मैं इस समस्या के साथ केवल एक ही नहीं कर रहा हूँ: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

Answer 1

पीट जैसा कि पहले ही कहा, आप किसी भी (स्वचालित) गणना से पहले छवि डाउनलोड किया जाता है ऐसा नहीं कर सकते, इसलिए ब्राउज़र इसकी चौड़ाई और ऊंचाई जानता है।

लेकिन चूंकि आप पहले से छवि के पहलू अनुपात को निर्धारित करने में सक्षम हैं, तो आप छवि के चारों ओर एक अतिरिक्त प्लेसहोल्डर तत्व जोड़ कर "वर्कअराउंड" आज़मा सकते हैं - और इस तथ्य का उपयोग कर सकते हैं कि padding values given in percentage always are calculated based on the width of an element, even for padding-top/-bottom।

कुछ इस तरह दिख सकता है यही कारण है कि:

<div style="position:relative; width:100%; height:0; padding-top:50%;"> 
    <img style="position:absolute; top:0; left:0; width:100%;" src="…"> 
</div> 

यह कोई ऊंचाई के साथ एक div तत्व है, लेकिन एक गद्दी-टॉप - कि यह गणना 100% का 50% की एक वास्तविक "ऊंचाई" दे देंगे चौड़ाई। (यह 2:1 के एक पहलू अनुपात के साथ एक छवि के लिए हो सकता है - 3:1 के लिए गद्दी-टॉप मूल्य 33.333% के हिसाब से होना चाहिए था -।, height/width*100 और बहुत आगे है मूल रूप से)

कि इससे पहले कि यहां तक ​​कि हमारे प्लेसहोल्डर अप अवधि चाहिए छवि लोड हो गई है।

छवि को ही इस अपेक्षाकृत तैनात प्लेसहोल्डर के अंदर पूरी तरह से स्थिति में है - कि यकीन है कि यह दस्तावेज़ में एक ही स्थान पर प्रदर्शित किया जाता बनाता है।

केवल बात यह है कि समस्याग्रस्त हो सकता है गोलाई जाता है कि दशमलव अंक के साथ मूल्यों के लिए हो गया है - 1000 पिक्सल के 33.333% 333.33 पिक्सल होगा, और ब्राउज़र 333 पिक्सल है कि दौर के लिए नीचे है। चाहिए resized छवि तथापि 334 पिक्सल के एक वास्तविक ऊंचाई है, यह सिर्फ क्षेत्र प्लेसहोल्डर div कि एक पिक्सेल द्वारा फैले है से बाहर प्रवाह होगा। वास्तविक लेआउट (और पिक्सेल-परिपूर्ण सटीकता के लिए आपकी बुत) पर निर्भर हो सकता है चाहे वह स्वीकार्य है या नहीं। जब तक यह तो आप एक मैनुअल गणना करने के लिए की आवश्यकता होगी, तो आप पहले से ही छवि आकार पता है कि यह डाउनलोड किया गया ब्राउज़र छवि का आकार पता नहीं है -