'ऑटो' ऊंचाई के साथ 100% चौड़ाई की पृष्ठभूमि छवि

Question 1

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

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

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

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

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

Question 2

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

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

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    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>

स्निपेट का विस्तार करें

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

Question 3

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

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

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

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

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

हालाँकि, आप विशुद्ध रूप से CSS का उपयोग करते हुए एक स्थिर पहलू अनुपात के साथ एक उत्तरदायी पृष्ठभूमि-छवि तत्व बना सकते हैं। ऐसा करने के लिए, आप height0 को सेट करते हैं और 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 से गुणा करें। यह काम करता है क्योंकि पैडिंग प्रतिशत की गणना हमेशा चौड़ाई के आधार पर की जाती है, भले ही यह लंबवत पैडिंग हो।

Question 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;
}

सरलीकृत संस्करण

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Question 5

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

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

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

Question 6

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

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

Question 7

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

   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>

सीएसएस: 100% चौड़ाई और स्क्रीन की ऊंचाई के लिए पृष्ठभूमि छवि खींच?

Question 8

यह 2017 है, और अब आप ऑब्जेक्ट-फिट का उपयोग कर सकते हैं जिसमें सभ्य समर्थन है । यह उसी तरह से काम करता है जैसे कि डिव का background-sizeलेकिन तत्व पर ही, और छवियों सहित किसी भी तत्व पर।

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

Question 9

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