छवि के पहलू-अनुपात को ध्यान में रखते हुए आप एक <div> भरने के लिए एक छवि को कैसे बढ़ाते हैं?

Question

मुझे इस छवि को अधिक से अधिक आकार के बिना संभव करना होगा ताकि यह अतिप्रवाहित हो <div>या छवि को तिरछा किया जा सके।

मैं छवि के पहलू-अनुपात की भविष्यवाणी नहीं कर सकता, इसलिए यह जानने का कोई तरीका नहीं है कि क्या उपयोग करना है:

<img src="url" style="width: 100%;">

या

<img src="url" style="height: 100%;">

मैं दोनों का उपयोग नहीं कर सकता (यानी शैली = "चौड़ाई: 100%; ऊँचाई: 100%;") क्योंकि यह फिट करने के लिए छवि को फैलाएगा <div>।

<div>स्क्रीन है, जो भी अप्रत्याशित है के प्रतिशत के द्वारा एक आकार सेट है।

Comments

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

— १२’०

संबंधित: stackoverflow.com/questions/787839/…

— Mottie

Answer 1

अपडेट २०१६:

आधुनिक ब्राउज़र बहुत बेहतर व्यवहार करते हैं। आपको बस छवि की चौड़ाई 100% ( डेमो ) सेट करना है

.container img {
   width: 100%;
}

---

चूंकि आपको पहलू अनुपात का पता नहीं है, इसलिए आपको कुछ स्क्रिप्टिंग का उपयोग करना होगा। यहाँ है कि मैं इसे jQuery ( डेमो ) के साथ कैसे करूंगा :

सीएसएस

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

एचटीएमएल

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

लिपि

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

Comments

क्या आकार बदलने से पहले उपयोगकर्ता छवि देख सकता है? किसी ने यह परीक्षण किया?

— 16

समाधान लगभग सही है, आपको बस सीएसएस में ऊंचाई और चौड़ाई को पलटना होगा: यदि छवि 'लंबा' है, तो चौड़ाई 100% होनी चाहिए न कि ऊंचाई (जो बड़ी और अतिप्रवाह होगी)। चौड़ी तस्वीरों के लिए चारों ओर रास्ता।

— मब्रिटो

@ मैंब्रिटो: आप सही कह रहे हैं, मुझे सीएसएस को अधिकतम-चौड़ाई / ऊंचाई में बदलना था और मैंने एक डेमो

— मोटी

@ मॉटी छवि गुणवत्ता को खोए बिना 960 px के कंटेनर में आकार 930 px चौड़ाई की एक छवि को फिट करने का एक तरीका है

— विवेक ड्रैगन

यह स्वीकृत उत्तर क्यों है। सवाल उनके कंटेनर के लिए बहुत छोटा होने के बारे में है। यानी इमेज के आस्पेक्ट रेश्यो को फ्रॉड किए बिना, उसके कंटेनर की चौड़ाई या ऊंचाई को भरने के लिए एक इमेज को कैसे बढ़ाया जा सकता है। इसके अलावा, आपके डेमो में, width:autoया height:autoगुणों को हटाने से आपकी छवियों का प्रदर्शन प्रभावित नहीं होता है। तथ्य की बात के रूप में, उन सभी गुणों के, जो आप छवि पर लागू कर रहे हैं, केवल max-width: 100%उन पर कोई प्रभाव पड़ता है, और यह केवल परिदृश्य छवि को प्रभावित करता है। लेकिन सबसे महत्वपूर्ण बात, आपका जवाब एक बड़ी कंटेनर को भरने के लिए एक छोटी छवि को फैलाने में मदद नहीं करता है।

— परिपक्वता

Answer 2

केवल का उपयोग कर यह करने के लिए एक बहुत ही आसान तरीका है CSSऔर HTML:

HTML:

<div class="fill"></div>

सीएसएस:

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

यह आपकी छवि को पृष्ठभूमि के रूप में रखेगा, और divविरूपण के बिना आकार को फिट करने के लिए इसे बढ़ाएगा।

Comments

क्या यह अपरिभाषित संख्याओं के साथ संभव है?

— 16

background-size: cover;यहाँ असली जादू है, और यह CSS3 है, लेकिन अधिकांश हाल के संस्करणों पर उचित ब्राउज़र समर्थन है (देखें: w3schools.com/cssref/css3_pr_background-size.asp )

— जॉन क्लोसके

यह HTML में छवि url सहित हो सकता है, शैली और सामग्री को अलग करने के लिए, अर्थात<div style="background-image: url('path/to/image.jpg');" class="fill"></div>

— बाइनरीफंट

background-size: cover पहलू अनुपात को बनाए नहीं रखता है, छवि के कुछ भाग जो तत्व के लिए आनुपातिक नहीं हैं फसली हैं। यहाँ

— एलेक्स_ज़ोंग

@Alex_Zhong, आप पहलू अनुपात को गलत समझते हैं। पहलू अनुपात का मतलब है कि छवि किसी भी दिशा में नहीं फैली है (इसलिए एक पूर्ण वृत्त चौड़ाई या ऊंचाई में अंडाकार नहीं बनेगा)। क्रॉपिंग पहलू अनुपात को बनाए रखने का एक आवश्यक हिस्सा हो सकता है (जैसा कि ओपी के उपयोग के मामले में है)।

— जेरेमी मोरिट्ज़

Answer 3

एक सही समाधान नहीं है, लेकिन यह सीएसएस मदद कर सकता है। ज़ूम वह है जो इस कोड को काम करता है, और कारक को छोटी छवियों के लिए आदर्श रूप से काम करने के लिए सैद्धांतिक रूप से अनंत होना चाहिए - लेकिन ज्यादातर मामलों में 2, 4, या 8 ठीक काम करता है।

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}

Comments

काश फ़ायरफ़ॉक्स में यह काम करता। क्यों नहीं zoomफ़ायरफ़ॉक्स से प्यार है?

— मैट

फ़ायरफ़ॉक्स अभी भी zoomलागू नहीं किया है, लेकिन यहां भविष्य के संदर्भ के लिए बग लिंक है: Bugzilla.mozilla.org/show_bug.cgi?id=390936

— एडम टेलर

Answer 4

यदि आप कर सकते हैं, पृष्ठभूमि छवियों का उपयोग करें और सेट करें background-size: cover। यह पृष्ठभूमि को पूरे तत्व को कवर करेगा।

सीएसएस

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

यदि आप इनलाइन छवियों का उपयोग करने के साथ फंस गए हैं तो कुछ विकल्प हैं। सबसे पहले, वहाँ है

वस्तु फिट

यह संपत्ति छवियों, वीडियो और अन्य वस्तुओं के समान कार्य करती है background-size: cover।

सीएसएस

img {
  object-fit: cover;
}

अफसोस की बात है, ब्राउज़र का समर्थन IE के साथ महान नहीं है संस्करण 11 तक यह बिल्कुल भी समर्थन नहीं करता है। अगला विकल्प jQuery का उपयोग करता है

सीएसएस + jQuery

एचटीएमएल

<div>
  <img src="image.png" class="cover-image">
</div>

सीएसएस

div {
  height: 8em;
  width: 15em;
}

कस्टम jQuery प्लगइन

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

इस तरह प्लगइन का उपयोग करें

jQuery('.cover-image').coverImage();

यह एक छवि लेगा, इसे छवि के आवरण के तत्व पर एक पृष्ठभूमि छवि के रूप में सेट करें और imgदस्तावेज़ से टैग हटा दें । अन्त में आप उपयोग कर सकते हैं

शुद्ध सीएसएस

आप इसे एक कमबैक के रूप में उपयोग कर सकते हैं। छवि कंटेनर को कवर करने के लिए बड़े पैमाने पर होगी, लेकिन यह नीचे पैमाने पर नहीं होगी।

सीएसएस

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

आशा है कि यह किसी की मदद कर सकता है, खुश कोडिंग!

Comments

मैं एक शुद्ध सीएसएस समाधान की तलाश कर रहा था ताकि छवियों को पृष्ठभूमि-छवि और पृष्ठभूमि के आकार का उपयोग किए बिना एक कंटेनर भरा जा सके और यहां सीएसएस कोड> = IE9 और आधुनिक ब्राउज़रों के लिए बहुत अच्छा काम करता है। यहाँ CodePen डेमो

— FLOQ डिजाइन

में शुद्ध सीएसएस , मैं हटा दिया min-और करने के लिए परिवर्तन width: 100%; height: 100%;और काम! भयानक समाधान! +1 धन्यवाद!

— गुइलहर्मे नेस्सिमेंटो

background-size: containयह भी उपयोगी है यदि आप चाहते हैं कि कोई भी छवि कभी भी क्लिप न हो।

— पोंकाडूडल

आप zoom:0.001स्केल करने के लिए प्योर सीएसएस समाधान में जोड़ सकते हैं ।

— इवोर झोउ

Answer 5

CSS3 के लिए धन्यवाद

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

IE और EDGE हमेशा बाहरी लोगों की तरह: http://caniuse.com/#feat=object-fit

Answer 6

अपडेट 2019

अब आप object-fitनिम्न मानों को स्वीकार करने वाली css संपत्ति का उपयोग कर सकते हैं :fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

एक उदाहरण के रूप में, आपके पास एक कंटेनर हो सकता है जो एक छवि रखता है।

<div class="container">
    <img src="" class="container_img" />
</div>

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;

Answer 7

यह सिर्फ HTML और CSS के साथ असंभव है, या कम से कम बेतहाशा विदेशी और जटिल है। यदि आप कुछ जावास्क्रिप्ट को यहां फेंकने के लिए तैयार हैं, तो यहां jQuery का उपयोग करके एक समाधान है:

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

यह छवि को आकार देगा ताकि यह हमेशा मूल तत्व के अंदर फिट होगा, चाहे इसका आकार कुछ भी हो। और जैसे ही यह $(window).resize()ईवेंट में बाइंड होता है , जब उपयोगकर्ता विंडो को आकार देता है, तो छवि समायोजित हो जाएगी।

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

Comments

मैं $ img.parent () मानता हूं; वास्तव में $ i.parent () होना चाहिए;

— जिम्बो जॉनी

Answer 8

बाहरी containerdiv की चौड़ाई और ऊंचाई निर्धारित करें । फिर नीचे img पर स्टाइल का उपयोग करें:

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

यह आपको अपने img के एक पहलू अनुपात को बनाए रखने में मदद करेगा

Comments

यह div भर नहीं करेगा।

— स्वेन वैन डेन बूगाअर्ट

Answer 9

यदि आप छवियों का पहलू-अनुपात रखते हुए अधिकतम चौड़ाई या ऊँचाई सेट करना चाहते हैं (ताकि यह बहुत बड़ी न हो), तो आप यह कर सकते हैं:

img{
   object-fit: contain;
   max-height: 70px;
}

Answer 10

मैं इस सवाल के साथ एक simular समस्या की खोज में आया था। मैं उत्तरदायी डिज़ाइन के साथ एक वेबपेज बना रहा हूं और पृष्ठ पर रखे गए तत्वों की चौड़ाई स्क्रीन की चौड़ाई के एक प्रतिशत पर सेट है। ऊंचाई एक vw मान के साथ सेट की गई है।

चूंकि मैं PHP और एक डेटाबेस बैकएंड के साथ पोस्ट जोड़ रहा हूं, शुद्ध CSS प्रश्न से बाहर था। हालाँकि मुझे jQuery / जावास्क्रिप्ट सॉल्यूशन थोड़ा ट्रबल का लगता था, इसलिए मैं एक नीट (इसलिए मुझे लगता है कि मैं कम से कम) सॉल्यूशन के साथ आया हूं।

HTML (या php)

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}

<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

शैली का उपयोग करके = "" यह PHP को मेरे पृष्ठ को गतिशील रूप से अपडेट करने के लिए पॉसिबल है और सीएसएस-स्टाइल स्टाइल के साथ मिलकर = "" डायनामिक डि-टैग को कवर करने के लिए पूरी तरह से कवर की गई छवि में समाप्त हो जाएगा।

Answer 11

आप object-fit: cover;पैरेंट डिव पर उपयोग कर सकते हैं ।

https://css-tricks.com/almanac/properties/o/object-fit/

Comments

इस पर कोई IE या एज का समर्थन दुर्भाग्य से नहीं :( caniuse.com/#feat=object-fit

— ल्यूक

Answer 12

यह अतिप्रवाह करने या छवि को तिरछा किए बिना इस छवि को अधिकतम आकार में संभव बनाने के लिए ।

लागू...

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

छवि के लिए शैलियों।

Answer 13

इस पद्धति का उपयोग करके आप div और छवियों के छवि भिन्न अनुपात के साथ अपने div में भर सकते हैं।

jQuery:

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML:

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

सीएसएस:

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}

Answer 14

इसने मेरे लिए चाल चली

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}

Answer 15

यदि आप IMG टैग के साथ काम कर रहे हैं, तो यह आसान है।

यह मैंने बनाया है:

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

लेकिन मुझे यह नहीं पता चला कि इसे #pic {बैकग्राउंड: url (img / menu.png)} एन्योन के साथ कैसे काम किया जाए? धन्यवाद

Comments

एक बदलाव किया और मेरी समस्या का जवाब मिला! नहीं, यह किसी की मदद करेगा। पृष्ठभूमि-छवि: url (छवियाँ / menu.png); बैकग्राउंड-रिपीट: नो-रिपीट; स्थिति: निरपेक्ष; पृष्ठभूमि का आकार: 300px; ऊंचाई: 100%; चौड़ाई: 100%; और आप javascript या jquery (.attr ({'style'): 'background-size: 150px auto; left: 50px; top: 50px;'}) का उपयोग करके बैकग्राउंड-साइज़ का मान बदल सकते हैं

— aleXx

Answer 16

मेरा भी ऐसा ही मुद्दा था। मैंने इसे सिर्फ CSS से हल किया ।

मूल रूप से Object-fit: coverएक div के अंदर एक छवि की स्थिति के दौरान पहलू अनुपात को बनाए रखने के कार्य को प्राप्त करने में आपकी सहायता करता है।

लेकिन समस्या Object-fit: coverIE में काम नहीं कर रही थी और यह 100% चौड़ाई ले रही थी और 100% ऊंचाई और पहलू अनुपात विकृत था। दूसरे शब्दों में, छवि ज़ूमिंग प्रभाव वहाँ नहीं था जो मैं क्रोम में देख रहा था।

मेरे द्वारा लिया गया दृष्टिकोण कंटेनर के अंदर की छवि को पूर्णता के साथ स्थिति में लाना था और फिर इसे संयोजन का उपयोग करके केंद्र में सही जगह पर रखना था :

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

एक बार जब यह केंद्र में होता है, तो मैं छवि को देता हूं,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

इससे छवि को ऑब्जेक्ट-फिट: कवर का प्रभाव मिलता है।

---

यहाँ उपरोक्त तर्क का प्रदर्शन है।

https://jsfiddle.net/furqan_694/s3xLe1gp/

यह तर्क सभी ब्राउज़रों में काम करता है।

Answer 17

HTML:

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

... और यदि आप छवि को सेट या बदलना चाहते हैं (उदाहरण के रूप में #foo का उपयोग करके):

jQuery:

$("#foo").css("background-image", "url('path/to/image.png')");

जावास्क्रिप्ट:

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";

Answer 18

यहां पाए गए कई समाधानों में कुछ सीमाएं हैं: कुछ IE (ऑब्जेक्ट-फिट) या पुराने ब्राउज़रों में काम नहीं कर रहे हैं, अन्य समाधान छवियों को स्केल नहीं करते हैं (केवल इसे सिकोड़ते हैं), कई समाधान विंडो के आकार का समर्थन नहीं करते हैं और कई हैं सामान्य नहीं है, या तो संकल्प या लेआउट (चित्र या परिदृश्य) की उम्मीद करें

यदि जावास्क्रिप्ट और jquery का उपयोग करना कोई समस्या नहीं है, तो मेरे पास @Tatu Ulmanen के कोड के आधार पर यह समाधान है। मैंने कुछ मुद्दों को तय किया, और कुछ कोड को जोड़ा, यदि छवि को डायनामिक रूप से लोड किया गया है और भीख पर उपलब्ध नहीं है। मूल रूप से यह विचार है कि दो अलग-अलग सीएसएस नियम हैं और आवश्यकता होने पर उन्हें लागू करें: एक जब सीमा ऊंचाई है, इसलिए हमें पक्षों पर काली पट्टियाँ दिखाने की जरूरत है, और सीएसएस नियम को सीमित करें जब सीमा चौड़ाई है, इसलिए हमें इसकी आवश्यकता है ऊपर / नीचे काली पट्टियाँ दिखाएँ।

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
}); 

एक HTML तत्व के लिए जैसे:

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>