क्यों चहचहाना इस

Question

की तरह एक पूर्ण स्क्रीन छवि को लागू करता है वहाँ twitter.In स्रोत कोड के पहले पन्ने में एक पूर्ण स्क्रीन छवि है, वे कुछ इस तरह करते हैं:

HTML:

<div class="front-bg"> 
<img class="front-image" src="xxx.jpg"> 
</div> 

सीएसएस:

.front-bg { 
position: fixed; 
width: 200%; 
height: 200%; 
left: -50%; 
} 
.front-bg img { 
margin: auto; 
min-width: 50%; 
min-height: 50%; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
} 

वे ".front-bg img" में शीर्ष/बाएं संपत्ति क्यों सेट करते हैं? और मैं कुछ इस तरह बदलते हैं:

.front-bg { 
position: fixed; 
width: 100%; 
height: 100%; 
} 
.front-bg img { 
min-width: 100%; 
min-height: 100%; 
} 

यह रूप में अच्छी तरह से काम करता है। वे इसके बजाय 200% चौड़ाई क्यों सेट करते हैं?

Answer 1

मुझे लगता है कि यह विभिन्न पहलू अनुपात के साथ विभिन्न स्क्रीनों के लिए जिम्मेदार है, इसलिए तस्वीर का केंद्र हमेशा केंद्रित होता है और स्क्रीन पर चित्र या परिदृश्य है या नहीं, किनारों पर पर्याप्त 'अतिरिक्त' है।

Answer 2

{शीर्ष: 0; बाएं: 0; दाएं: 0; नीचे: 0; }

इस भाग का डेस्कटॉप पर उपयोग नहीं किया जाता है क्योंकि इस छवि में स्थिति संपत्ति सेट नहीं है, शायद यह अतिरिक्त मीडिया प्रश्नों के साथ विभिन्न उपकरणों पर उपयोग किया जाता है?

मैं 200%/200% के पीछे कारण कहूंगा और स्थिति मार्जिन को छवि को केंद्रित करने के लिए पसंदीदा तरीके से कुछ करना होगा। % 100 /% 100 परिदृश्य छवि के साथ हमेशा छोटी स्क्रीन पर ब्राउज़र विंडो की बाएं सीमा पर गठबंधन छोड़ा जाएगा।

मार्जिन: 0 ऑटो; न्यूनतम चौड़ाई: 50%;

वे इसे ब्राउज़र विंडो के रूप में चौड़ा बनाते हैं और हमेशा केंद्रित होते हैं।