सीएसएस छवियों का आकार बदलने और किसी भी स्क्रीन को फिट करने के लिए

Question

मैं http://www.flywavez.com पर एक अस्थायी पृष्ठ के साथ काम कर रहा हूं लेकिन मुझे छवि का आकार बदलने और सभी स्क्रीन संकल्पों में समान नहीं हो सकता है। आईफोन पर यह कमर से पहले लड़की को बंद कर देता है, और यह 13 9 x 768 पर रेज के साथ मेरी 19 "लैपटॉप स्क्रीन पर देखे जाने पर पूरी तरह से फिट बैठता है, और यहां तक ​​कि जब मैंने अपने लैपटॉप से ​​वीडियो को वीजीए के माध्यम से अपने 55" टीवी पर खिलाया। हालांकि जब मैं अधिक रिज़ॉल्यूशन वाले बड़े मॉनीटर पर देखता हूं, तो वहां एक बड़ी जगह और स्पष्ट दृश्य होता है जहां छवि का आकार समाप्त होता है। मैंने सोचा कि मैंने /* टैबलेट लैंडस्केप */ @media स्क्रीन और (अधिकतम-चौड़ाई: 1060 पीएक्स) { #wrapper {चौड़ाई: 67% के साथ सीएसएस का आकार बदल रहा था; } }

/* Tabled Portrait */ 
    @media screen and (max-width: 768px) { 
     #wrapper { width:100%; } 
    } 

    /* Tabled Portrait */ 
    @media screen and (max-width: 768px) { 
     #wrapper { width:100%; } 
    } 

    /* iphone */ 
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     img { max-width: 100%; } 
    } 

    /* ipad */ 
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
img { max-width: 100%; } 
    } 

मैं है, क्योंकि यह जब पर किसी भी मदद के लिए 1366 x 768

धन्यवाद देखा इस छवि को सभी प्रस्तावों पर प्रदर्शित करना चाहते।

Answer 1

मुझे लगता है कि यह छवि अनुपात खोने के बिना आप जो करने की कोशिश कर रहे हैं, वह हासिल करना मूल रूप से असंभव है, जो शायद अवांछित है। क्या आपने 'पृष्ठभूमि-आकार' संपत्ति का उपयोग करने पर विचार किया है?

body { 
    background: url('images/example.jpg') no-repeat fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

आप इसे यहाँ देख सकते हैं:: http://jsfiddle.net/DTN54/

Answer 2

कवर यह कीवर्ड निर्दिष्ट करता है कि पृष्ठभूमि छवि सुनिश्चित करते हुए अपने दोनों आयाम हैं संभव के रूप में छोटे होने के लिए बढ़ाया जाना चाहिए सीएसएस के नीचे एक बहुत अच्छी लग को प्राप्त होता है पृष्ठभूमि स्थिति क्षेत्र के संबंधित आयामों से अधिक या बराबर।

में यह कीवर्ड निर्दिष्ट करता है कि पृष्ठभूमि छवि को पृष्ठभूमि स्थिति क्षेत्र के संबंधित आयामों से कम या उसके बराबर दोनों सुनिश्चित करने के दौरान पृष्ठभूमि छवि को यथासंभव बड़े पैमाने पर स्केल किया जाना चाहिए। तो कवर

100% यह किसी भी फसल के बिना ऊंचाई और चौड़ाई दोनों के लिए 100% स्केल करेगा।

body { 
     background: url('images/example.jpg') no-repeat fixed; 
     -webkit-background-size: contain; 
     -moz-background-size: contain; 
     -o-background-size: contain; 
     background-size: contain; 
    } 

Answer 3

असल में, यह आप सभी की जरूरत है:

body { 
    background: url(http://www.bhmpics.com/thumbs/dambo_the_bottle_funny_situation-t3.jpg) no-repeat center; 
}