CSS इमेज साइज, कैसे भरें, स्ट्रेच नहीं?

415

मेरी एक छवि है, और मैं इसे एक विशिष्ट चौड़ाई और ऊंचाई (पिक्सेल में) सेट करना चाहता हूं

लेकिन अगर मैं सीएसएस ( width:150px; height:100px) का उपयोग करके चौड़ाई और ऊंचाई निर्धारित करता हूं , तो छवि खिंच जाएगी, और यह बदसूरत हो सकती है।

CSS का उपयोग करके छवियों को विशिष्ट आकार में कैसे भरें , और इसे खींचकर नहीं?

भरने और खींच छवि का उदाहरण:

मूल छवि:

मूल

स्ट्रेच्ड इमेज:

तनी

भरा हुआ चित्र:

भर ग्या

कृपया ध्यान दें कि ऊपर दी गई छवि में उदाहरण: पहले, छवि को 150x255 (अनुरक्षित पहलू अनुपात) का आकार दिया जाता है, और फिर, इसे 150x100 पर क्रॉप किया जाता है।

css image

— महदी घियासी
स्रोत

बस सेट करने का प्रयास करें widthऔर heightतदनुसार समायोजित करना चाहिए

— NewInTheBusiness

3

यह छवि को फैलाता है। इसे देखें: jsfiddle.net/D7E3E

— Mahdi Ghiasi

यह आकार नहीं लेता छवि का एक हिस्सा लेता है!

— अली बेन मेसाउद

3

क्रिस कॉयियर के पास इसके कुछ अच्छे समाधान भी हैं: css-tricks.com/perfect-full-page-background-image

— ambiguousmouse

1

बहुत महत्वपूर्ण: यह एसईओ प्रयोजनों के लिए एक अविश्वसनीय रूप से बुरा अभ्यास है। अगर आप इसे बैकग्राउंड इमेज के रूप में इस्तेमाल कर रहे हैं तो यह ठीक काम करता है, लेकिन अगर आप चाहते हैं कि इमेज गूगल को मिल जाए तो यह इंडेक्स नहीं होगा अगर यह केवल बैकग्राउंड इमेज है।

— एलेक्स बैनमैन

395

यदि आप छवि को सीएसएस पृष्ठभूमि के रूप में उपयोग करना चाहते हैं, तो एक सुंदर समाधान है। बस CSS3 संपत्ति में उपयोग coverया ।containbackground-size

.container {
  width: 150px;
  height: 100px;
  background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

<div class="container"></div>

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

जबकि coverआपको एक स्केल्ड इमेज containदेगा , आपको एक स्केल्ड इमेज देगा। दोनों पिक्सेल पहलू अनुपात को संरक्षित करेंगे।

http://jsfiddle.net/uTHqs/ (कवर का उपयोग करके)

http://jsfiddle.net/HZ2FT/ (शामिल होते हुए)

इस दृष्टिकोण को थॉमस फूक्स के त्वरित गाइड के अनुसार रेटिना डिस्प्ले के अनुकूल होने का फायदा है ।

यह उल्लेखनीय है कि दोनों विशेषताओं के लिए ब्राउज़र समर्थन IE6-8 को बाहर करता है।

— मार्सेलो डी पोली
स्रोत

1

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

— मार्सेलो डे पोली

1

क्या आप बता सकते हैं कि इस मामले में पृष्ठभूमि-स्थिति छवि के केंद्र की स्थिति को इंगित करने के लिए क्यों लगती है बजाय इसके कि यह शीर्ष-बाएँ कोने में है? क्या यह पृष्ठभूमि-आकार का एक परिणाम है: कवर?

— Matteo

1

मेरा सिर्फ छवि को विस्तारित करने वाले संपूर्ण DIV को कवर करता है। मैं वक्र को समाप्त होते नहीं देखता।

— SearchForKnowledge

3

किस background-repeat: no-repeat;लिए है? यदि छवि में यह कंटेनर है, तो यह वैसे भी खुद को नहीं दोहराएगा।

— lurit

3

'बैकग्राउंड-पोजिशन' को 'सेंटर सेंटर' पर भी सेट किया जा सकता है। उदाहरण के लिए: .container {... पृष्ठभूमि-स्थिति: केंद्र केंद्र; }

— लियो रिबेरो

556

आप सीएसएस संपत्ति का उपयोग कर सकते हैं object-fit।

.cover {
  object-fit: cover;
  width: 50px;
  height: 100px;
}

<img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />

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

उदाहरण यहाँ देखें

IE के लिए एक पॉलीफ़िल है: https://github.com/anselmh/object-fit

— afonsoduarte
स्रोत

11

यह देखने के लिए दिलचस्प है कि यह imgटैग के साथ भी किया जा सकता है (न केवल background-imageविधि के रूप में उपरोक्त उत्तर में वर्णित है)।

— साभार

44

इस विकल्प के रूप में विचार करते समय, ध्यान रखें कि object-fit बहुत सारे ब्राउज़रों में समर्थित नहीं है ।

— joshreesjones

2

दुर्भाग्य से background-sizeमेरी परियोजनाओं में शायद ही कभी एक व्यवहार्य समाधान है। आपको कोई SEO लाभ प्राप्त होने की संभावना कम है और आप स्क्रीन पाठकों के लिए अतिरिक्त संदर्भ प्रदान करना चाह सकते हैं जहां छवि के साथ एक ALT टैग, कैप्शन, आदि प्रदान नहीं कर सकते।

— मार्कस

3

यह अच्छा है, लेकिन कोई IE समर्थन नहीं है। कोई भी पॉलीफिल अब काम नहीं करता है।

— जेक

3

बस object-fit: cover;इसका उपयोग करता है। बहुत बहुत धन्यवाद

— लुका

67

@Afonsoduarte द्वारा उपरोक्त उत्तर पर संवर्धन ( स्वीकृत नहीं ) ।
यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं

तीन अंतर हैं:

width:100%शैली पर प्रदान करना ।
यह उपयोगी है अगर आप बूटस्ट्रैप का उपयोग कर रहे हैं और चाहते हैं कि छवि सभी उपलब्ध चौड़ाई को खींचे।
heightसंपत्ति निर्दिष्ट करना वैकल्पिक है, आप इसे हटा सकते हैं / आवश्यकतानुसार रख सकते हैं
```
.cover {
   object-fit: cover;
   width: 100%;
   /*height: 300px;  optional, you can remove it, but in my case it was good */
}
```
वैसे, तत्व पर heightऔर widthविशेषताओं को प्रदान करने की कोई आवश्यकता नहीं है, imageक्योंकि वे शैली द्वारा ओवरराइड किए जाएंगे।
इसलिए यह कुछ ऐसा लिखने के लिए पर्याप्त है।
```
<img class="cover" src="url to img ..."  />
```

— हकन Fıstık
स्रोत

1

ठीक वही जो मेरे द्वारा खोजा जा रहा था।

— फ्रांसिस लेन्थिएर

1

आप एक चुंबन की जरूरत है!

— किन वांग

ऑब्जेक्ट-फिट IE के साथ काम नहीं करता है?

— bgcode

1

यह 2020 है, मुझे लगता है कि यह IE को छोड़ने का एक अच्छा समय है

— हकन फिएस्टीक

56

एकमात्र तरीका यह है कि आपकी छवि और उपयोग के आसपास एक कंटेनर हो overflow:hidden:

एचटीएमएल

<div class="container"><img src="ckk.jpg" /></div>

सीएसएस

.container {
    width: 300px;
    height: 200px;
    display: block;
    position: relative;
    overflow: hidden;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

यह सीएसएस में एक दर्द है कि आप क्या चाहते हैं और छवि को केंद्र में रखते हैं, जैसे कि jquery में एक त्वरित सुधार है:

var conHeight = $(".container").height();
var imgHeight = $(".container img").height();
var gap = (imgHeight - conHeight) / 2;
$(".container img").css("margin-top", -gap);

http://jsfiddle.net/x86Q7/2/

— डोमिनिक ग्रीन
स्रोत

1

धन्यवाद। यह काम किया है, लेकिन यह ऊपर से छवि फसल । (इसे देखें: jsfiddle.net/x86Q7 ) क्या केंद्र से छवि को क्रॉप करने का कोई तरीका नहीं है ?

— महदी घियासी

1

@MahdiGhiasi: .container img css में शीर्ष और बाएँ गुणों को बदलें !!

— अली बेन मेसॉड

मैं margin-topउदाहरण के लिए इमेज सेट कर सकता हूं 50px(इसे देखें: jsfiddle.net/x86Q7/1 ), लेकिन वास्तविक केंद्र से इसे कैसे क्रॉप करें ? (बिना jQuery के?)

— महदी घियासी

2

आह क्षमा करें, आपकी टिप्पणी नहीं देखी, लेकिन मैंने jquery को अभी जोड़ दिया :)

— डोमिनिक ग्रीन

1

महान समाधान! मेरे लिए ऊर्ध्वाधर भरण क्षैतिज से अधिक महत्वपूर्ण था, इसलिए मुझे सिर्फ '.container img' वर्ग के लिए "चौड़ाई: 100%" को "ऊँचाई: 100%" में बदलना पड़ा। धन्यवाद!

— डेब

26

CSS समाधान कोई JS और कोई पृष्ठभूमि छवि नहीं:

विधि 1 "मार्जिन ऑटो" (IE8 + - FF नहीं!):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  position:absolute; 
  top:0; 
  bottom:0; 
  margin: auto;
  width:100%;
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

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

http://jsfiddle.net/5xjr05dt/

विधि 2 "ट्रांसफ़ॉर्म" (IE9 +):

div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}

div img{
  position:absolute; 
  width:100%;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
  <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>

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

http://jsfiddle.net/5xjr05dt/1/

विधि 2 का उपयोग किसी निश्चित चौड़ाई / ऊंचाई वाले कंटेनर में एक छवि को केंद्रित करने के लिए किया जा सकता है। दोनों अतिप्रवाह कर सकते हैं - और यदि छवि कंटेनर से छोटी है, तो यह अभी भी केंद्रित होगा।

http://jsfiddle.net/5xjr05dt/3/

विधि 3 "डबल रैपर" (IE8 + - FF नहीं!):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    left: 50%;
}
.inner img {
    display: block;
    border: 1px solid blue; /* just for example */
    position: relative;
    right: 50%;
    opacity: .5; /* just for example */
}

<div class="outer">
  <div class="inner">
     <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

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

http://jsfiddle.net/5xjr05dt/5/

विधि 4 "डबल रैपर और डबल इमेज" (IE8 +):

.outer{
  width:150px; 
  height:100px; 
  margin: 200px auto; /* just for example */
  border: 1px solid red; /* just for example */
  /* overflow: hidden;	*/ /* TURN THIS ON */
  position: relative;
}
.inner { 
    border: 1px solid green; /* just for example */
    position: absolute;
    top: 50%;
    bottom: 0;
    display: table;
    left: 50%;
}
.inner .real_image {
    display: block;
    border: 1px solid blue; /* just for example */
    position: absolute;
    bottom: 50%;
    right: 50%;
    opacity: .5; /* just for example */
}

.inner .placeholder_image{
  opacity: 0.1; /* should be 0 */
}

<div class="outer">
  <div class="inner">
    <img class="real_image" src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
    <img class="placeholder_image"  src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
  </div>
</div>

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

http://jsfiddle.net/5xjr05dt/26/

विधि 1 में थोड़ा बेहतर समर्थन है - आपको छवि की चौड़ाई या ऊंचाई निर्धारित करनी होगी!
उपसर्ग विधि 2 के साथ भी सभ्य समर्थन है (यानी 9 से ऊपर) - विधि 2 का ओपेरा मिनी पर कोई समर्थन नहीं है!
विधि 3 दो रैपर का उपयोग करती है - चौड़ाई और ऊँचाई को ओवरफ्लो कर सकती है।
विधि 4 एक दोहरी छवि का उपयोग करता है (प्लेसहोल्डर के रूप में) यह कुछ अतिरिक्त बैंडविड्थ ओवरहेड देता है, लेकिन इससे भी बेहतर क्रॉसबोवर समर्थन करता है।

विधि 1 और 3 फ़ायरफ़ॉक्स के साथ काम नहीं करते हैं

— जेटी हटनबोस
स्रोत

यह केवल वही है जो वास्तव में काम करता है (माइनस जेएस समाधान)। धन्यवाद!

— जेक

यह या तो ऊंचाई या चौड़ाई के अतिप्रवाह तक सीमित है, लेकिन एक दिलचस्प समाधान है।

— जेक

1

@ जेक - ऊपर की विधि 2 के साथ चौड़ाई और ऊंचाई को ओवरफ्लो करना संभव है - अतिरिक्त फ़िडल के साथ मेरा अद्यतन उत्तर देखें।

— JT Houtenbos

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

— जेक

1

@ जेक - कूल - मुझे क्षैतिज केंद्रित करने के लिए एक 3 वीं विधि मिली। मैंने वर्टिकल सेंटरिंग का समर्थन करने के लिए इस विधि को बढ़ाया। मैं ऊपर एक 3 वीं विधि के रूप में अपना अतिरिक्त पोस्ट करूंगा। ऐसा लगता है कि यह IE7 + सबूत है (संभवतः कम भी)। यहाँ मूल जवाब है: stackoverflow.com/questions/3300660/…

— JT Houtenbos

10

एक अन्य समाधान छवि को वांछित चौड़ाई और ऊंचाई के साथ एक कंटेनर में रखना है। इस पद्धति का उपयोग करके आपको छवि को किसी तत्व की पृष्ठभूमि छवि के रूप में सेट नहीं करना होगा।

फिर आप इसे एक imgटैग के साथ कर सकते हैं और बस तत्व पर अधिकतम-चौड़ाई और अधिकतम-ऊँचाई सेट कर सकते हैं ।

सीएसएस:

.imgContainer {
    display: block;
    width: 150px; 
    height: 100px;
}

.imgContainer img {
    max-width: 100%;
    max-height: 100%;
}

HTML:

<div class='imgContainer'>
    <img src='imagesrc.jpg' />
</div>

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

यदि आप छवि को लंबवत और क्षैतिज रूप से केन्द्रित करना चाहते हैं तो आप कंटेनर सीएसएस को बदल सकते हैं:

.imgContainer {
    display: table-cell;
    width: 150px; 
    height: 100px;
    text-align: center;
    vertical-align: middle;
}

यहाँ एक JS Fiddle http://jsfiddle.net/9kUYC/2/ है

— earl3s
स्रोत

यह सीएसएस में कवर के समान नहीं है, जहां परिणामी आयामों में से एक हमेशा 100% (या किनारे मामले में बराबर) से परे है

— Miroshko

नहीं, यह समाधान सुनिश्चित करता है कि यह कभी भी 100% से आगे नहीं बढ़ा है, जो सवाल का हिस्सा था। वे छवि को विकृत या मूल आयामों से आगे नहीं बढ़ाना चाहते थे।

— 18

3

सवाल यह था कि भरी हुई छवि के उदाहरण के साथ "कैसे भरें", जो स्पष्ट रूप से क्रॉप है।

— मिरोस्को 15

लेकिन क्या होगा अगर आपको छवि को उत्तरदायी बनाने की आवश्यकता है? एक विशिष्ट चौड़ाई और ऊंचाई को परिभाषित करना and

— रिकार्डो ज़िया

2

यह वही था जो मुझे चाहिए था। धन्यवाद!

— निको रोडसेविच

5

JQuery का उपयोग करते हुए @Dominic ग्रीन के उत्तर का निर्माण, यहां एक समाधान है जो उन छवियों के लिए काम करना चाहिए जो या तो व्यापक हैं या वे उच्च से अधिक हैं।

http://jsfiddle.net/grZLR/4/

जावास्क्रिप्ट को करने का एक और अधिक सुंदर तरीका है, लेकिन यह काम करता है।

function myTest() {
  var imgH = $("#my-img").height();
  var imgW = $("#my-img").width();
  if(imgW > imgH) {
    $(".container img").css("height", "100%");
    var conWidth = $(".container").width();
    var imgWidth = $(".container img").width();
    var gap = (imgWidth - conWidth)/2;
    $(".container img").css("margin-left", -gap);
  } else {
    $(".container img").css("width", "100%");
    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight)/2;
    $(".container img").css("margin-top", -gap);
  }
}
myTest();

— ramdog
स्रोत

5

सीएसएस पृष्ठभूमि का उपयोग नहीं
इसे क्लिप करने के लिए केवल 1 डिव
सही पहलू अनुपात रखने की तुलना में न्यूनतम चौड़ाई का आकार
केंद्र से फसल (लंबवत और क्षैतिज रूप से, आप इसे ऊपर, लेफ और परिवर्तन के साथ समायोजित कर सकते हैं)

सावधान रहें यदि आप किसी विषय या कुछ का उपयोग कर रहे हैं, तो वे अक्सर 100% पर img अधिकतम-चौड़ाई की घोषणा करेंगे। आपको कोई नहीं बनाना है इसका परीक्षण करें :)

https://jsfiddle.net/o63u8sh4/

<p>Original:</p>
<img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>

<p>Wrapped:</p>
<div>
    <img src="http://i.stack.imgur.com/2OrtT.jpg" alt="image"/>
</div>


div{
  width:150px; 
  height:100px; 
  position:relative;
  overflow:hidden;
}
div img{
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

— dmegatool
स्रोत

यह वह उत्तर है जिसकी मुझे तलाश थी।

— मार्कोस बुर्के

यह वही है जो मैं लंबे समय से करना चाहता था, धन्यवाद;)

— बॉस कोटगा

4

मैंने फिलमोर नामक एक jQuery प्लगइन का निर्माण करने में मदद की , जो उन background-size: coverब्राउज़र में काम करता है जो इसका समर्थन करते हैं, और उन लोगों के लिए एक शर्म की बात है जो नहीं करते हैं। इसे एक रूप दें!

— ऐडन फेल्डमैन
स्रोत

4

मुझे लगता है कि इस उत्तर के लिए काफी देर हो चुकी है। वैसे भी उम्मीद है कि यह भविष्य में किसी की मदद करेगा। मुझे कोणीय में कार्ड की स्थिति की समस्या का सामना करना पड़ा। घटनाओं की सरणी के लिए प्रदर्शित कार्ड हैं। यदि घटना की छवि चौड़ाई कार्ड के लिए बड़ी है, तो छवि को दो तरफ से काटकर और 100% की ऊंचाई से दिखाया जाना चाहिए। यदि छवि की ऊंचाई लंबी है, तो छवियों का निचला भाग क्रॉप किया गया है और चौड़ाई 100% है। इसके लिए मेरा शुद्ध सीएसएस समाधान है:

HTML:

 <span class="block clear img-card b-b b-light text-center" [ngStyle]="{'background-image' : 'url('+event.image+')'}"></span>

सीएसएस

.img-card {
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
overflow: hidden;
}

— Nodirabegimxonoyim
स्रोत

मैं थाह नहीं कर सकता कि यह कैसे काम करता है लेकिन यह करता है। आपको स्पान को बिल्कुल शीर्ष पर रखने की आवश्यकता है: 0; दायें: 0; बॉटम: 0; बायीं: 0, अपेक्षाकृत तैनात माता-पिता के अंदर इसे आयाम देने के लिए।

— माइक

प्रिय माइक के लिए धन्यवाद, अगर यह मददगार था, तो मुझे खुशी है। क्या आप चाहते हैं कि मैं आपकी टिप्पणी के साथ उत्तर को अपडेट करूं?

— नादिराबेगमिक्सेनोयिम

3

कुछ इस तरह से कोशिश करें: http://jsfiddle.net/D7E3E/4/

ओवरफ्लो के साथ एक कंटेनर का उपयोग करना: छिपा हुआ

संपादित करें: @Dominic ग्रीन ने मुझे हराया।

— woutr_be
स्रोत

धन्यवाद। यह काम किया है, लेकिन यह ऊपर से छवि फसल । (इसे देखें: jsfiddle.net/x86Q7 ) क्या केंद्र से छवि को क्रॉप करने का कोई तरीका नहीं है ?

— महदी घियासी

सीएसएस के साथ मुश्किल हो सकता है, यह सबसे अच्छा मैं jsfiddle.net/D7E3E/5 के

— woutr_be

हां, इसे सही ढंग से केंद्रित करने के लिए, आपको jQuery का उपयोग करना चाहिए, बहुत आसान हो सकता है।

— woutr_be

3

यह छवियों को एक विशिष्ट आकार में भर देगा, बिना इसे खींचे या बिना क्रॉप किए

img{
    width:150px;  //your requirement size
    height:100px; //your requirement size

/*Scale down will take the necessary specified space that is 150px x 100px without stretching the image*/
    object-fit:scale-down;
}

— मनोज सेल्विन
स्रोत

2

फुलस्क्रीन में छवि फिट करने के लिए यह प्रयास करें:

पृष्ठभूमि-दोहराने: दौर;

— suyash1798
स्रोत

0

<div class="container">
     <img src="http://i.stack.imgur.com/2OrtT.jpg"/>
</div>

<style>
.container {
       width: 150px;
       height: 100px;
       overflow: hidden;
}
</style>

— user3181614
स्रोत

meta.stackoverflow.com/questions/300837/…

— sshashank124