एक बाउंडिंग बॉक्स फिट करने के लिए स्केल छवि

Question

एक छवि को एक बाउंडिंग बॉक्स (पहलू-अनुपात रखते हुए) में स्केल करने के लिए केवल css-only समाधान है? यह काम करता है अगर छवि कंटेनर से बड़ी है:

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

उदाहरण:

• केस 1 (कार्य) का उपयोग करें: http://jsfiddle.net/Jp5AQ/2/
• केस 2 (कार्य) का उपयोग करें: http://jsfiddle.net/Jp5AQ/3/

लेकिन मैं छवि को स्केल करना चाहता हूं जब तक कि एक आयाम कंटेनर का 100% न हो।

• केस 3 का उपयोग करें (काम नहीं करता): http://jsfiddle.net/Jp5AQ/4/

Comments

क्या आपका मतलब ऊंचाई की तरह है: 100% और चौड़ाई: 100%? क्या आपके पास एक वांछित आयाम है जिसे आप पहुंचना चाहते हैं? अन्यथा आप छवि को खींच सकते हैं और इसे उन आयामों तक भी पहुंचने के लिए मजबूर कर सकते हैं।

— mikevoermans

@ मायिकवॉर्मन्स मेरे दो पहले उदाहरणों को देखें: मैं छवि को तब तक स्ट्रेच करना चाहता हूं जब तक कि आयामों में से एक 100% न हो और दूसरा <= 100%

— थॉमस गिलोरी

@jacktheripper पहलू-अनुपात का संरक्षण कर रहा है ...

— थॉमस गुइलॉरी

@gryzzly उदाहरण खुद के लिए बोलता है! यदि उन्होंने उदाहरणों पर गौर किया होता, तो यह स्पष्ट था।

— थॉमस गुइलॉरी

@ आर्टिमुज मैं पूरी तरह असहमत हूं। आपके सवालों के जवाब के तीन (मेरा सहित) सुझाव देते हैं कि यह स्पष्ट नहीं था।

— खान

Answer 1

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

नहीं, दोनों दिशाओं में ऐसा करने का कोई CSS केवल तरीका नहीं है। आप जोड़ सकते हैं

.fillwidth {
    min-width: 100%;
    height: auto;
}

एक तत्व के लिए हमेशा इसकी 100% चौड़ाई होती है और स्वचालित रूप से पहलू अनुपात, या व्युत्क्रम की ऊंचाई को मापता है:

.fillheight {
    min-height: 100%; 
    width: auto;
}

हमेशा अधिकतम ऊंचाई और सापेक्ष चौड़ाई के पैमाने पर। दोनों को करने के लिए, आपको यह निर्धारित करना होगा कि पहलू अनुपात कंटेनर से अधिक या कम है, और सीएसएस ऐसा नहीं कर सकता।

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

---

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

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});

.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>

Comments

वास्तव में एक समाधान है: सीएसएस 3 पृष्ठभूमि-आकार को शामिल करने के लिए सेट करना। मेरा जवाब देखिए।

— थॉमस गिलोरी

तुम बिलकुल ठीक कह रहे हो। भले ही अब यह डेढ़ साल बाद है, फिर भी मैंने अपनी पोस्ट को एडिट किया।

— स्टीफन मुलर

मैं बताता हूं कि यह पूछे गए प्रश्न का सही उत्तर है, जो कि img टैग के लिए CSS है। यह प्रासंगिक है क्योंकि शब्दार्थ img टैग सामग्री है, एक div के लिए पृष्ठभूमि के रूप में छवि नहीं है। जबकि कुछ परिस्थितियाँ इसे अव्यवहारिक बनाती हैं (यदि आप छवि बनाम कंटेनर अनुपात नहीं जानते हैं), दूसरों के लिए यह सही है। धन्यवाद।

— duncanwilcox

Answer 2

CSS3 के लिए धन्यवाद एक समाधान है!

समाधान के रूप में छवि डाल करने के लिए है background-imageऔर फिर सेट background-sizeकरने के लिए contain।

एचटीएमएल

<div class='bounding-box'>
</div>

सीएसएस

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

इसका यहाँ परीक्षण करें: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

नवीनतम ब्राउज़रों के साथ पूर्ण संगतता: http://caniuse.com/background-img-opts

केंद्र में div संरेखित करने के लिए, आप इस भिन्नता का उपयोग कर सकते हैं:

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}

Comments

एक अच्छा है, हालांकि मेरा जवाब गलत नहीं है (आप विशेष रूप से आईएमजी के बारे में पूछ रहे थे) यह एक महान समाधान है और मुझे इसके बारे में सोचना चाहिए। एकमात्र समस्या यह है कि IE 8 अभी भी इतने व्यापक रूप से उपयोग किया जाता है कि मैं अभी तक इस पर भरोसा नहीं करना चाहता, लेकिन फिर भी अच्छा पकड़।

— Stephan Muller 10

यदि आप कोई लेटरबॉक्सिंग नहीं करना चाहते हैं, तो इसे "कवर" पर सेट करें: पृष्ठभूमि-आकार: इसमें शामिल हैं;

— arxpoetica

यह ध्यान दिया जाना चाहिए कि आप HTML के साथ छवि URL को इंजेक्ट कर सकते हैं <div class=image style="background-image: url('/images/foo.jpg');"></div>:। अन्य सभी शैलियों को सीएसएस के साथ लागू किया जाना चाहिए।

— एंड्री मिखायलोव - lolmaus

मैं कहूंगा कि यह एक भयानक दृष्टिकोण है। इसे पृष्ठभूमि-छवि में बदलकर, आप HTML में छवि के अर्थ को हटा रहे हैं।

— animuson

@animuson: यह अभी भी मेरी मदद करता है क्योंकि मैं मुद्रित रिपोर्टों के लिए HTML / CSS का उपयोग कर रहा हूं, और शब्दार्थ के बारे में कुछ नहीं बता सकता

— हूं

Answer 3

यहाँ एक खोज समाधान मैंने खोजा है:

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

यह छवि को दस गुना बढ़ा देगा, लेकिन इसे अपने अंतिम आकार के 10% तक सीमित कर देगा - इस प्रकार इसे कंटेनर में बांधा जाएगा।

background-imageसमाधान के विपरीत , यह <video>तत्वों के साथ भी काम करेगा ।

इंटरएक्टिव उदाहरण:

 function step(timestamp) {
     var container = document.getElementById('container');
     timestamp /= 1000;
     container.style.left   = (200 + 100 * Math.sin(timestamp * 1.0)) + 'px';
     container.style.top    = (200 + 100 * Math.sin(timestamp * 1.1)) + 'px';
     container.style.width  = (500 + 500 * Math.sin(timestamp * 1.2)) + 'px';
     container.style.height = (500 + 500 * Math.sin(timestamp * 1.3)) + 'px';
     window.requestAnimationFrame(step);
 }

 window.requestAnimationFrame(step);

 #container {
     outline: 1px solid black;
     position: relative;
     background-color: red;
 }
 #image {
     display: block;
     max-width: 10%;
     max-height: 10%;
     transform-origin: 0 0;
     transform: scale(10);
 }

<div id="container">
    <img id="image" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png">
</div>

Comments

मुझे यह समाधान पसंद है। न केवल यह वास्तव में सवाल का जवाब देता है (मुझे पता है, एक विचार क्या है), यह जावास्क्रिप्ट का सहारा लेने के बिना सभी आधुनिक ब्राउज़रों में खूबसूरती से काम करता है!

— ndm13

मैं उस का एक बेला देखना पसंद करूंगा। 400x400 कंटेनर में एक img रखने के मेरे परीक्षण में img बस कोने में फसली हो जाती है

— cyberwombat

अच्छा उत्तर! @ यशुआ आपको transform-origin: top leftफसल रोकने के लिए जोड़ना होगा। / ज़ोंबी

— XwipeoutX

प्रतिभाशाली। मेरी एकमात्र चिंता खराब-कोड वाले ब्राउज़र में छवि गुणवत्ता का संभावित नुकसान होगा, लेकिन सिद्धांत रूप में इसे ठीक काम करना चाहिए!

— कोडनेम

दिलचस्प है, लेकिन क्रोम पर काम नहीं करता है। छवि की क्रॉप पंक्ति में परिणाम।

— मैट जूल

Answer 4

आज, केवल ऑब्जेक्ट-फिट कहें: इसमें शामिल हैं। समर्थन सब कुछ है लेकिन IE: http://caniuse.com/#feat=object-fit

Comments

IE के पास यह लिखने के समय में केवल 16% बाजार हिस्सेदारी है (09/12/2016 10:56 am) और घटती रहती है, इसलिए यह मेरे लिए सबसे अच्छा जवाब है: D

— Zhang

टाइपो या टूटी लिंक के अलावा अन्य चीजों को ठीक करने के लिए अन्य लोगों के उत्तरों को संपादित न करें। मैं कुछ बच्चों के साथ ऐसा नहीं कहूंगा, जैसे "एसओ जवाब में बकवास ब्राउज़रों के लिए एक पॉलीफ़िल है", और मैं अपने जवाब की सराहना नहीं करता हूं कि इसे संपादित करने के लिए जैसा मैंने कहा था। यदि आप अपने शब्दों का उपयोग करना चाहते हैं, तो उन्हें अपने उत्तर में रखें।

— ग्लेन मेनार्ड

मैं कहूंगा, कि IE समस्या नहीं है, लेकिन एज। कैनिअस के अनुसार इसके लिए object-fitअभी भी विकास जारी है।

— बैरदेव ने

यह 2017 और उसके बाद के शीर्ष-मतदान उत्तरों में से एक होना चाहिए ... ऊपर दिए गए कैंसिज़ लिंक के अनुसार, विश्व स्तर पर सभी उपयोगकर्ताओं में से 90% अब एक ब्राउज़र का उपयोग करते हैं जो इसका समर्थन करता है

— fgblomqvist

मैंने सिर्फ एक उत्तर पोस्ट किया है जो बिना और इसके साथ काम करता है object-fit: stackoverflow.com/a/46456673/474031

— gabrielmaldi

Answer 5

एचटीएमएल:

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

सीएसएस:

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}

Answer 6

आप इसे एक ही समय में लंबवत-लंबी और क्षैतिज रूप से लंबी छवियों के लिए शुद्ध सीएसएस और पूर्ण ब्राउज़र समर्थन के साथ पूरा कर सकते हैं।

यहाँ एक स्निपेट है, जो क्रोम, फ़ायरफ़ॉक्स और सफारी में काम करता है (दोनों का उपयोग करते हुए object-fit: scale-down, और इसका उपयोग किए बिना):

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}

Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

Answer 7

पृष्ठभूमि छवि के बिना और कंटेनर की आवश्यकता के बिना एक और समाधान (हालांकि बाउंडिंग बॉक्स के अधिकतम आकार ज्ञात होने चाहिए):

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

---

यदि कंटेनर का उपयोग आवश्यक है, तो अधिकतम-चौड़ाई और अधिकतम-ऊंचाई को 100% तक सेट किया जा सकता है:

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

इसके लिए आपके पास कुछ ऐसा होगा:

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>

Answer 8

यह उदाहरण पूरी खिड़की को फिट करने के लिए आनुपातिक रूप से खिंचाव के लिए है। उपरोक्त सही कोड के लिए एक आशुरचना जोड़ना है$( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

दो स्थितियां हैं। पहला व्यक्ति यह .fillheightजाँचता रहता है कि छवि की ऊँचाई डिव से कम है और वर्ग को लागू करता है जबकि अगली चौड़ाई को जाँचता है और .fillwidthकक्षा को लागू करता है । दोनों स्थितियों में दूसरे वर्ग का उपयोग करके हटा दिया जाता है.removeClass()

यहाँ सीएसएस है

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

आप की जगह ले सकता 100vhसे 100%अगर आप एक div में साथ छवि को फैलाने के लिए चाहते हैं। यह उदाहरण पूरी विंडो को फिट करने के लिए आनुपातिक रूप से स्ट्रेच करने के लिए है।

Comments

ओपी ने विशेष रूप से सीएसएस-केवल दृष्टिकोण के लिए कहा।

— कोल्ट मैककॉर्मैक

Answer 9

क्या आप ऊपर की तरफ स्केल करना चाह रहे हैं लेकिन नीचे की तरफ नहीं?

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

यह हालांकि, पहलू-अनुपात को लॉक नहीं करता है।

Comments

किसी के जवाब को वोट करने से पहले अपनी उम्मीदों के साथ थोड़ा और स्पष्ट होने की कोशिश करें। विशेष रूप से जब वे आपके प्रश्न का उत्तर देने से पहले आपके प्रश्न का उत्तर दे चुके होते हैं।

— खान

इसके अलावा, अधिक विनम्र बनने की कोशिश करें। यदि आप इस तरह से बात करते हैं तो कोई भी आपकी मदद करने वाला नहीं है।

— मीशा रेज़लिन

@Artimuz मेरी क्षमा याचना अगर मैं तुम्हें याद किया, लेकिन यह मेरे लिए स्पष्ट नहीं था कि आप पहलू अनुपात रखना चाहते थे, यही कारण है कि मैंने उस पर विशेष रूप से टिप्पणी की। इसके अलावा, आप देखेंगे कि मैंने उदाहरणों से आपके कोड का एक स्निपेट चिपकाया है। मेरा मानना ​​है कि ऊंचाई रखना: ऑटो; यदि आप एक चौड़ाई निर्दिष्ट करते हैं, तो आपके लिए ऐसा करेगा।

— इरीकोसग

Answer 10

मैंने बॉक्स के अंदर टेबल टू सेंटर इमेज का उपयोग किया है। यह पहलू अनुपात और तराजू छवि को एक तरह से रखता है जो पूरी तरह से बॉक्स के अंदर है। यदि छवि बॉक्स से छोटी है तो इसे केंद्र में दिखाया गया है। नीचे कोड 40px चौड़ाई और 40px ऊंचाई बॉक्स का उपयोग करता है। (यह निश्चित नहीं है कि यह कितनी अच्छी तरह काम करता है क्योंकि मैंने इसे एक और अधिक जटिल कोड से हटा दिया और इसे थोड़ा सरल कर दिया)

सीएसएस:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Answer 11

ऐसा करने का सबसे साफ और सरल तरीका:

पहले कुछ CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

यह काम कर जाना चाहिए!

Answer 12

इससे मुझे मदद मिली:

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

फिर तत्व पर (आप जवाबदेही जोड़ने के लिए जावास्क्रिप्ट या मीडिया प्रश्नों का उपयोग कर सकते हैं):

<div class='img-class' style='transform: scale(X);'></div>

उम्मीद है की यह मदद करेगा!

Answer 13

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

मैं अपने जवाब को और अधिक स्पष्ट करने के लिए अपने उत्तर को संपादित कर रहा हूं क्योंकि मुझे एक डाउन वोट मिला है।

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

<div class="boundingbox"><img src="image.jpg"/></div>

Comments

यह उत्तर केवल तभी काम करता है जब बॉक्स चौड़ा होने की तुलना में लंबा हो।

— XwipeoutX