क्या पृष्ठभूमि-आकार के बराबर है: छवि तत्वों के लिए कवर और सम्‍मिलित है?

Question

मेरे पास कई पृष्ठ और विभिन्न पृष्ठभूमि चित्रों वाली एक साइट है, और मैं उन्हें सीएसएस से प्रदर्शित करता हूं जैसे:

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

हालांकि, मैं <img>तत्वों का उपयोग करते हुए एक पृष्ठ पर अलग (फुलस्क्रीन) चित्र दिखाना चाहता हूं , और मैं चाहता हूं कि उनके पास उपरोक्त background-image: cover;संपत्ति के समान गुण हैं (सीएसएस से छवियों को प्रदर्शित नहीं किया जा सकता है, उन्हें HTML दस्तावेज़ से प्रदर्शित किया जाना चाहिए)।

आम तौर पर मैं उपयोग:

div.mydiv img {
    width: 100%;
}

या:

div.mydiv img {
    width: auto;
}

चित्र को पूर्ण और उत्तरदायी बनाने के लिए। हालाँकि चित्र बहुत सिकुड़ जाता है ( width: 100%) जब स्क्रीन बहुत संकीर्ण हो जाती है, और नीचे स्क्रीन में शरीर की पृष्ठभूमि-रंग दिखाई देता है। दूसरी विधि, width: auto;केवल छवि को पूर्ण आकार देती है और स्क्रीन के आकार पर प्रतिक्रिया नहीं देती है।

क्या छवि को उसी तरह प्रदर्शित करने का एक तरीका है जो background-size: coverकरता है?

Comments

बड़ा सवाल है।

— wonsuc

Answer 1

समाधान # 1 - ऑब्जेक्ट-फिट संपत्ति ( आईई समर्थन का अभाव )

बस object-fit: cover;img पर सेट करें ।

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<img src="http://lorempixel.com/1500/1000" />

MDN देखें - के बारे में object-fit: cover:

तत्व की संपूर्ण सामग्री बॉक्स को भरते समय इसके पहलू अनुपात को बनाए रखने के लिए प्रतिस्थापित सामग्री का आकार होता है। यदि ऑब्जेक्ट का पहलू अनुपात उसके बॉक्स के पहलू अनुपात से मेल नहीं खाता है, तो ऑब्जेक्ट को फिट करने के लिए क्लिप किया जाएगा।

इसके अलावा, देखना यह Codepen डेमो जो तुलना object-fit: coverके साथ एक छवि के लिए लागू background-size: coverएक पृष्ठभूमि छवि के लिए आवेदन किया

---

समाधान # 2 - img को पृष्ठभूमि छवि के साथ css से बदलें

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}

<img src="http://placehold.it/1500x1000" />

Comments

इस टिप्पणी के समय, ऑब्जेक्ट-फिट अभी तक इंटरनेट एक्सप्लोरर (यहां तक ​​कि एज) के किसी भी संस्करण द्वारा समर्थित नहीं है। हालांकि यह विचाराधीन है ।

— माइक कोरमेन्डी

IE में ऑब्जेक्ट-फिट अभी भी समर्थित नहीं है। मैं दूर रहना होगा अगर उत्पादन साइट पर और आप IE उपयोगकर्ताओं के बारे में परवाह है।

— ट्रैविस माइकल हेलर

आप IE और पुरानी सफारी के लिए # 1 के लिए पॉलीफ़िल भी जोड़ सकते हैं: github.com/bfred-it/object-fit-images

— Valera Tumash

दूसरे उपाय से सावधान। मोबाइल ब्राउज़र पर vh पर भरोसा नहीं करने के लिए सबसे अच्छा: nicolas-hoizey.com/2015/02/…

— sudokai

@RoCk आप इस तरह का सामान caniuse पर पा सकते हैं: caniuse.com/#search=background-att :) PS मुझे लगता है कि हम सभी इस बात के लिए निश्चिंत हो सकते हैं कि IE कभी भी इस सुविधा के लिए समर्थन हासिल नहीं करेगा और चूंकि कोई पॉलीफ़िल भी नहीं है, हम पुन: खराब हो गया या जेएस / सीएसएस हैक के साथ अटक गया जब तक एमएस ने निर्णय नहीं लिया कि यह विंडोज से हटाकर (अंत में) "हत्या" IE है।

— सिडऑफ

Answer 2

वास्तव में काफी सरल सीएसएस समाधान है जो IE8 पर भी काम करता है:

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}

<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

Comments

यह कवर के व्यवहार को दोहराता नहीं है, लेकिन इसके बजाय src img से एक केंद्रित अनुभाग को क्रॉप करता है। Jsfiddle.net/sjt71j99/4 देखें - पहला img आपकी फसल है, अगला पृष्ठभूमि-आकार के माध्यम से है: कवर, यानी हम क्या चाहते हैं, तीसरा मूल img है। मैंने परिदृश्य के लिए पाया कि अधिकतम-ऊँचाई के साथ न्यूनतम ऊँचाई और न्यूनतम चौड़ाई की जगह: 100%; चित्र के लिए अधिकतम-चौड़ाई का उपयोग करें: 100%। अच्छा होगा अगर वहाँ एक समाधान है कि परिदृश्य या चित्र के लिए काम किया था। कोई विचार? यह अब तक का सबसे अच्छा क्रॉस-ब्राउज़र समाधान है।

— टेरालिंग

आप सही हैं, यह ठीक वैसा ही नहीं करता है, मैंने कुछ सामान की कोशिश की, लेकिन ऐसा लगता है कि आप वास्तव में इसे 100% दोहराने के लिए नहीं प्राप्त कर सकते हैं, यह तब तक काम करता है जब तक कि छवि एक आयाम पर कंटेनर से छोटी हो हालांकि।

— साइमन

@terraling, मुझे पता है कि यह एक पुरानी टिप्पणी है, लेकिन मेरे उत्तर की जांच करें । यह केंद्र में img की स्थिति में परिवर्तन का उपयोग करता है।

— थियागो बारकाला

Answer 3

मान लें कि आप एक कंटेनर तत्व की व्यवस्था कर सकते हैं जिसे आप भरना चाहते हैं, यह काम करने के लिए प्रकट होता है, लेकिन थोड़ा हैकिश लगता है। संक्षेप में, मैं सिर्फ min/max-width/heightएक बड़े क्षेत्र का उपयोग करता हूं और फिर उस क्षेत्र को मूल आयामों में वापस स्केल करता हूं ।

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}

<h1>contain</h1>
  <div class="container contain">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       />
    <!-- 366x200 -->
  </div>

Comments

पूरी तरह से सहमत हूँ। यह सामान्य उपयोग के लिए उपरोक्त सभी का सबसे अच्छा समाधान है।

— वारिस विल्सोल्स

यह बहुत अच्छा है। इसने मेरी मदद की। धन्यवाद

— रमन Nikitsenka

Answer 4

मुझे कवर और समाहित करने के लिए एक सरल समाधान मिला, जो शुद्ध सीएसएस है, और गतिशील आयामों वाले कंटेनरों के लिए काम करता है, और छवि अनुपात पर कोई प्रतिबंध भी नहीं करता है।

ध्यान दें कि यदि आपको 16 से पहले IE, या एज का समर्थन करने की आवश्यकता नहीं है, तो आप ऑब्जेक्ट-फिट का बेहतर उपयोग करते हैं।

पृष्ठभूमि का आकार: कवर

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}

<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

1000% का उपयोग यहाँ किया जाता है अगर छवि प्राकृतिक आकार उस आकार से बड़ी है जो इसे प्रदर्शित किया जा रहा है। उदाहरण के लिए, यदि छवि 500x500 है, लेकिन कंटेनर केवल 200x200 है। इस समाधान के साथ, छवि को 2000x2000 (न्यूनतम-चौड़ाई / मिनट-ऊँचाई के कारण) का आकार बदल दिया जाएगा, फिर 200x200 तक (कारण transform: scale(0.1)) तक घटा दिया जाएगा ।

X10 फैक्टर को x100 या x1000 द्वारा प्रतिस्थापित किया जा सकता है, लेकिन आमतौर पर 2000x2000 की छवि को 20x20 div पर प्रदान किया जाना आदर्श नहीं है। :)

पृष्ठभूमि के आकार: होते हैं

उसी सिद्धांत का अनुसरण करते हुए, आप इसका अनुकरण करने के लिए भी उपयोग कर सकते हैं background-size: contain:

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}

<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Comments

स्केल ट्रिक पहले से ही यहाँ दी गई है https://stackoverflow.com/a/28771894/2827823 , इसलिए मैं अभी एक और पोस्ट करने की बात नहीं देख सकता हूँ, और ऐसा ही transformकई जवाबों में है

— Ason

आप एक स्पष्टीकरण भी विस्तार करना चाहते हैं, तो इसकी बजाय उस जवाब को अद्यतन के रूप में वहाँ एक ही समाधान के साथ 2 के लिए कोई जरूरत नहीं है

— Ason

आपकी टिप्पणी के लिए धन्यवाद @LGSon मैंने उस उत्तर को पहले नहीं देखा था, लेकिन मुझे अभी भी लगता है कि मेरे उत्तर का मूल्य यहाँ है। दृष्टिकोण बहुत अधिक समान है, लेकिन मेरी राय में मेरा थोड़ा साफ तरीके से प्रस्तुत किया गया है। यहां कई अन्य उत्तर समान समाधान प्रस्तुत करते हैं, और उनमें से सभी अपूर्ण हैं (आपके द्वारा लिंक किए गए को छोड़कर)। इसलिए यदि मेरा उत्तर यहाँ नहीं होना चाहिए, तो अन्य को नहीं होना चाहिए।

— थियागो बारकला

मैंने पाया कि यह एंड्रॉइड पर क्रोम मोबाइल ब्राउज़र में छवि को सिकोड़ता है (एलजी जी 3 और सैमसंग एस 9 पर परीक्षण किया गया), मैंने इसे आईओएस पर क्रोम के साथ परीक्षण नहीं किया, एंड्रॉइड पर फ़ायरफ़ॉक्स मोबाइल ने इसे सही ढंग से प्रदर्शित किया।

— जेको

Answer 5

नहीं , आप इसे काफी पसंद नहीं कर सकते background-size:cover लेकिन ..

यह दृष्टिकोण बहुत करीब है: यह निर्धारित करने के लिए जावास्क्रिप्ट का उपयोग करता है कि क्या छवि परिदृश्य या चित्र है, और तदनुसार शैलियों को लागू करता है।

जे एस

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

सीएसएस

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

Answer 6

मुझे अनुकरण करने की आवश्यकता थी background-size: contain, लेकिन object-fitसमर्थन की कमी के कारण उपयोग नहीं किया जा सका । मेरी छवियों में परिभाषित आयामों के साथ कंटेनर थे और यह मेरे लिए काम कर रहा था:

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

Comments

आप min-height: 100%; max-height:100%;पृष्ठभूमि-आकार के बराबर उपयोग और प्राप्त कर सकते हैं : कवर;

— क्रिस Seufert

min-height: 100%; max-height:100%;पहलू-अनुपात को संरक्षित नहीं करेगा, इसलिए बिल्कुल समान नहीं है।

— रीडीन

Answer 7

दोनों के साथ min-heightऔर सेट करने का प्रयास करें :min-widthdisplay:block

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

( बेला )

बशर्ते आपकी छवि का तत्व तत्व है position:relativeया position:absolute, छवि कंटेनर को कवर करेगी। हालांकि, यह केंद्रित नहीं होगा।

आप आसानी से छवि को केंद्र में रख सकते हैं यदि आप जानते हैं कि यह क्षैतिज रूप से (सेट margin-left:-50%) या लंबवत (सेट margin-top:-50%) ओवरफ्लो करेगा या नहीं । यह पता लगाने के लिए सीएसएस मीडिया प्रश्नों (और कुछ गणित) का उपयोग करना संभव हो सकता है।

Answer 8

सीएसएस के साथ आप अनुकरण कर सकते हैं object-fit: [cover|contain];। यह उपयोग transformऔर है [max|min]-[width|height]। यह सही नहीं है। यह एक मामले में काम नहीं करता है: यदि छवि कंटेनर से व्यापक और छोटी है।

.img-ctr{
  background: red;/*visible only in contain mode*/
  border: 1px solid black;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
  display: block;
}
.img{
  display: block;

  /*contain:*/
  /*max-height: 100%;
  max-width: 100%;*/
  /*--*/

  /*cover (not work for images wider and shorter than the container):*/
  min-height: 100%;
  width: 100%;
  /*--*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<p>Large square:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x1000"></span>
</p>
<p>Small square:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x100"></span>
</p>
<p>Large landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/2000x1000"></span>
</p>
<p>Small landscape:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x100"></span>
</p>
<p>Large portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x2000"></span>
</p>
<p>Small portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/100x200"></span>
</p>
<p>Ultra thin portrait:
<span class="img-ctr"><img class="img" src="http://placehold.it/200x1000"></span>
</p>
<p>Ultra wide landscape (images wider and shorter than the container):
<span class="img-ctr"><img class="img" src="http://placehold.it/1000x200"></span>
</p>

Answer 9

आप जो कर सकते हैं, वह तत्व में पृष्ठभूमि छवि को जोड़ने के लिए 'शैली' विशेषता का उपयोग कर सकता है, इस तरह से आप अभी भी HTML में छवि को कॉल कर रहे हैं, लेकिन आप अभी भी पृष्ठभूमि के आकार का उपयोग करने में सक्षम होंगे: सीएसएस व्यवहार को कवर करें:

HTML:

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

सीएसएस:

    .image-div{
    background-size: cover;
    }

यह है कि मैं पृष्ठभूमि-आकार कैसे जोड़ूं: उन तत्वों को व्यवहार को कवर करें जिन्हें मुझे HTML में गतिशील रूप से लोड करने की आवश्यकता है। फिर आप पृष्ठभूमि-स्थिति जैसे भयानक सीएसएस वर्गों का उपयोग कर सकते हैं: केंद्र। उछाल

Comments

ज्यादातर चिंताओं से अलग, लेकिन यहां कुछ अन्य हैं: प्रोग्रामर.स्टैकएक्सचेंज.

— दान

Answer 10

IE के लिए आपको दूसरी पंक्ति - चौड़ाई: 100% शामिल करने की आवश्यकता है;

.mydiv img {
    max-width: 100%;
    width: 100%;
}

Answer 11

im को ऐसा करने के लिए 'टिप्पणी जोड़ने' की अनुमति नहीं है, लेकिन Eru Penkman ने जो कुछ किया है, वह बहुत अधिक स्थान पर है, इसे पृष्ठभूमि कवर की तरह प्राप्त करने के लिए आपको केवल बदलने की आवश्यकता है

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

सेवा

.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}

Answer 12

मुझे पता है कि यह पुराना है, हालांकि कई समाधान मैं ऊपर देखता हूं कि छवि / वीडियो कंटेनर के लिए बहुत बड़ा है इसलिए वास्तव में पृष्ठभूमि के आकार के कवर की तरह काम नहीं कर रहा है। हालांकि, मैंने "उपयोगिता कक्षाएं" बनाने का फैसला किया ताकि यह छवियों और वीडियो के लिए काम करे। आप बस कंटेनर को क्लास .मीडिया-कवर-रैपर और मीडिया आइटम को ही क्लास .मीडिया-कवर देते हैं

फिर आपके पास निम्नलिखित jQuery है:

function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth > mediaWrapperWidth && mediaCoverHeight > mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth > mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds

फोन करते समय यह सुनिश्चित करें कि पेज आकार बदलने का ध्यान रखें:

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

फिर निम्नलिखित सीएसएस:

.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

हाँ, इसे jQuery की आवश्यकता हो सकती है, लेकिन यह बहुत अच्छी तरह से प्रतिक्रिया करता है और पृष्ठभूमि-आकार की तरह कार्य करता है: कवर और आप इसे अतिरिक्त एसईओ मान प्राप्त करने के लिए छवि और / या वीडियो पर उपयोग कर सकते हैं।

Answer 13

हम ZOOM दृष्टिकोण ले सकते हैं। हम मान सकते हैं कि पहलू की ऊँचाई या चौड़ाई वांछित ऊँचाई या चौड़ाई से कम होने पर अधिकतम 30% (या 100% तक) ज़ूमिंग प्रभाव हो सकता है। हम अतिप्रवाह के साथ शेष आवश्यक क्षेत्र को छिपा नहीं सकते हैं: छिपा हुआ।

.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

यह अलग चौड़ाई या ऊंचाई के साथ छवियों को समायोजित करेगा।

Answer 14

background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;

उसी सटीक स्वरूप का सामना किया। ऊपर मेरे लिए काम किया।