मुझे नया http://thesixtyone.com डिज़ाइन पसंद है। मैं सोच रहा हूं कि वे पूरे पृष्ठभूमि में फिट करने के लिए छवि को आनुपातिक रूप से कैसे फैलाते हैं? क्या वे सीएसएस/जावास्क्रिप्ट या अन्य चाल का उपयोग कर रहे हैं?TheSixyOne.com आनुपातिक रूप से पूर्ण पृष्ठ पर छवि को कैसे फैलाता है?
दोनों सीएसएस और जावास्क्रिप्ट का उपयोग किया जाता है।
यह ऊंचाई या चौड़ाई से अधिक लेता है, उसमें मिलान छवि आयाम सेट करता है, फिर मूल आयाम के अनुपात को नए आयाम में गणना करता है, फिर उस अनुपात को विरोधी आयाम पर लागू करता है।
उदाहरण के लिए। कहें मूल तस्वीर 100x100 थी। यदि आपकी स्क्रीन 200x100 है; तो यह फिट करने के लिए पहले आयाम (200 से 100 बड़ा) फैलाता है। यह 2: 1 अनुपात है, इसलिए यह अन्य आयाम के लिए एक ही स्ट्रैच करता है। परिणामस्वरूप छवि वास्तव में 200x200 है।
पूरी चीज केंद्रित रखने के लिए एक स्पर्श कोड जोड़ें (इसलिए कमर आयाम के ऑफ-स्क्रीन भाग बराबर हैं), और वॉयला।
मेरी उदाहरण में, छवि 50 अप ले जाया जाएगा, ताकि आप बीच 100 (स्क्रीन आकार) चित्र कि 200.
तक बढ़ाया गया है को देखने के छवि वास्तव में है पृष्ठभूमि छवि संपत्ति सेट के साथ एक डीआईवी टैग।
सुनिश्चित नहीं हैं कि पुस्तकालय they'e का उपयोग कर, लेकिन उनकी जावास्क्रिप्ट स्रोत में मैं "आकार परिवर्तन" और पाया के लिए एक खोज किया:
Event.observe(window,"resize",t61.background.sync_size);
कौन सा लगता है कि वे window.onresize के लिए एक ईवेंट हैंडलर संलग्न कर रहे हैं।
ऐसा लगता है कि वे पृष्ठ के आकार में हर बार छवि को केंद्रित कर रहे हैं – Phen