एक 'ऑटो' ऊंचाई

Question

के साथ 100% चौड़ाई पृष्ठभूमि छवि मैं वर्तमान में एक कंपनी के लिए मोबाइल लैंडिंग पृष्ठ पर काम कर रहा हूं। यह वास्तव में मूलभूत लेआउट है लेकिन शीर्षलेख के नीचे एक उत्पाद की एक छवि है जो हमेशा 100% चौड़ाई होगी (डिज़ाइन यह हमेशा किनारे से किनारे तक जा रहा है)। स्क्रीन की चौड़ाई के आधार पर छवि की ऊंचाई स्पष्ट रूप से तदनुसार समायोजित होगी। मैंने मूल रूप से इसे एक आईएमजी (100% की सीएसएस चौड़ाई के साथ) किया और यह बहुत अच्छा काम किया लेकिन मुझे एहसास हुआ कि मैं अलग-अलग संकल्पों के आधार पर अलग-अलग छवियों की सेवा के लिए मीडिया प्रश्नों का उपयोग करना चाहता हूं - मान लें कि एक छोटा, मध्यम और उदाहरण के लिए, एक ही छवि का एक बड़ा संस्करण। मुझे पता है कि आप सीएसएस के साथ img src नहीं बदल सकते हैं, इसलिए मुझे लगा कि मुझे HTML में एक आईएमजी टैग के विपरीत छवि के लिए सीएसएस पृष्ठभूमि का उपयोग करना चाहिए।

मुझे यह ठीक से काम नहीं कर रहा है क्योंकि पृष्ठभूमि छवि के साथ div को पृष्ठभूमि दिखाने के लिए चौड़ाई और ऊंचाई दोनों की आवश्यकता होती है। मैं स्पष्ट रूप से 'चौड़ाई: 100%' का उपयोग कर सकता हूं लेकिन ऊंचाई के लिए मैं क्या उपयोग करूं? मैं 150px की तरह एक यादृच्छिक निश्चित ऊंचाई डाल सकता हूं और फिर मैं छवि के शीर्ष 150px देख सकता हूं लेकिन यह समाधान नहीं है क्योंकि निश्चित ऊंचाई नहीं है। मेरे पास एक नाटक था और पाया कि एक बार ऊंचाई (150 पीएक्स के साथ परीक्षण किया गया है) मैं सही ढंग से div में छवि फिट करने के लिए 'पृष्ठभूमि आकार: 100%' का उपयोग कर सकता हूं। मैं इस परियोजना के लिए हालिया CSS3 का उपयोग कर सकता हूं क्योंकि इसका उद्देश्य पूरी तरह से मोबाइल पर है।

मैंने नीचे एक मोटा उदाहरण जोड़ा है। कृपया इनलाइन शैलियों को क्षमा करें, लेकिन मैं अपने प्रश्न को थोड़ा स्पष्ट करने और बनाने के लिए एक बुनियादी उदाहरण देना चाहता था।

<div id="image-container"> 
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> 
</div> 

क्या मुझे पूरे पृष्ठ के आधार पर कंटेनर div को प्रतिशत ऊंचाई देना है या क्या मैं इसे पूरी तरह से गलत देख रहा हूं?

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

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

Answer 1

इसके बजाय आप img सीधे उपयोग कर सकते हैं और सभी व्यूपोर्ट की चौड़ाई max-width:100%; का उपयोग करके देखें प्रसार करने के लिए छवि प्राप्त करने और कृपया याद रखें कि वे के रूप में अपने मुख्य कंटेनर div के लिए किसी भी गद्दी या मार्जिन लागू नहीं है कंटेनर की कुल चौड़ाई बढ़ाएगा। इस नियम का उपयोग करके आप ब्राउज़र की चौड़ाई के बराबर छवि चौड़ाई कर सकते हैं और ऊंचाई अनुपात अनुपात के अनुसार भी बदल जाएगी। धन्यवाद।

संपादित करें: खिड़की के विभिन्न आकार पर छवि बदलने

$(window).resize(function(){ 
 
    var windowWidth = $(window).width(); 
 
    var imgSrc = $('#image'); 
 
    if(windowWidth <= 400){ \t \t \t 
 
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a'); 
 
    } 
 
    else if(windowWidth > 400){ 
 
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="image-container"> 
 
    <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/> 
 
</div>

इस तरह से आप ब्राउज़र के विभिन्न आकार में अपनी छवि को बदलने में।

Answer 2

आप सीएसएस संपत्ति background-size का उपयोग करें और cover या contain के लिए सेट, अपनी पसंद के आधार कर सकते हैं। कवर पूरी तरह से खिड़की को कवर करेगा, जबकि इसमें एक तरफ खिड़की फिट होगी जिससे पूरे पृष्ठ को कवर नहीं किया जा सके (जब तक कि स्क्रीन का पहलू अनुपात छवि के बराबर न हो)।

कृपया ध्यान दें कि यह एक CSS3 संपत्ति है। पुराने ब्राउज़र में, इस संपत्ति को अनदेखा किया जाता है। वैकल्पिक रूप से, आप विंडो आकार के आधार पर सीएसएस सेटिंग्स को बदलने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, लेकिन यह पसंद नहीं है। background-image का उपयोग करने का

body { 
    background-image: url(image.jpg); /* image */ 
    background-position: center;  /* center the image */ 
    background-size: cover;   /* cover the entire window */ 
} 

Answer 3

टिम एस वर्तमान में स्वीकृत एक "सही" उत्तर के करीब था। यदि आप cover (जो छवि को किनारों से बाहर निकलने की अनुमति देगा) या contain (जो छवि को बिल्कुल विस्तारित करने की अनुमति नहीं देता है) का उपयोग करने के बजाय, 100% चौड़ाई, सीएसएस के साथ किए गए परिवर्तनीय ऊंचाई पृष्ठभूमि छवि को प्राप्त करना चाहते हैं , सिर्फ इसलिए की तरह सीएसएस सेट:

body { 
    background-image: url(img.jpg); 
    background-position: center top; 
    background-size: 100% auto; 
} 

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

संपादित करें: मुझे अभी एहसास हुआ (3 महीने बाद) कि आप शायद छवि को अतिप्रवाह नहीं करना चाहते हैं; आप कंटेनर तत्व को अपनी पृष्ठभूमि-छवि (इसके पहलू अनुपात को संरक्षित करने के लिए) के आधार पर आकार बदलना चाहते हैं, जहां तक ​​मुझे पता है सीएसएस के साथ संभव नहीं है।

उम्मीद है कि आप img तत्व पर नए srcset विशेषता का उपयोग करने में सक्षम होंगे। यदि आप अब img तत्वों का उपयोग करना चाहते हैं, तो वर्तमान में स्वीकृत उत्तर शायद सबसे अच्छा है।

हालांकि, आप पूरी तरह से सीएसएस का उपयोग कर निरंतर पहलू अनुपात के साथ एक उत्तरदायी पृष्ठभूमि-छवि तत्व बना सकते हैं। ऐसा करने के लिए, आप 0 के height सेट और तत्व की अपनी चौड़ाई का एक प्रतिशत के लिए padding-bottom निर्धारित करते हैं, जैसे इतना:

.foo { 
    height: 0; 
    padding: 0; /* remove any pre-existing padding, just in case */ 
    padding-bottom: 75%; /* for a 4:3 aspect ratio */ 
    background-image: url(foo.png); 
    background-position: center center; 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

विभिन्न पहलू अनुपात का उपयोग करने, मूल छवि की ऊंचाई को विभाजित यह द्वारा में अपनी चौड़ाई, और प्रतिशत मूल्य प्राप्त करने के लिए 100 से गुणा करें। यह काम करता है क्योंकि पैडिंग प्रतिशत हमेशा चौड़ाई के आधार पर गणना की जाती है, भले ही यह लंबवत पैडिंग हो।

Answer 4

कोशिश इस

html { 
    background: url(image.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
     -o-background-size: cover; 
      background-size: cover; 
} 

Answer 5

बस एक दो रंग पृष्ठभूमि छवि का उपयोग:

<div style="width:100%; background:url('images/bkgmid.png'); 
     background-size: cover;"> 
content 
</div> 

Answer 6

सीएसएस जोड़ें:

html,body{ 
     height:100%; 
     } 
    .bg-img { 
     background: url(image.jpg) no-repeat center top; 
     background-size: cover; 
     height:100%;  
    } 

और HTML है:

<div class="bg-mg"></div> 

CSS: stretching background image to 100% width and height of screen?

Answer 7

यह 2017 है, और अब आप object-fit का उपयोग कर सकते हैं जिसमें decent support है। यह एक div के background-size के समान ही काम करता है, लेकिन तत्व पर, और छवियों सहित किसी भी तत्व पर।

.your-img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}