div भरने के लिए छवि खींचें, लेकिन

Question

स्कू नहीं करें, मैं एक div के अंदर फिट करने के लिए एक छवि खिंचाव बनाने की कोशिश कर रहा हूं। हालांकि मैं इसे अतिप्रवाह करना चाहता हूं ताकि पूरा div भरा हो। Div पृष्ठ के साथ आकार बदलता है। मैं jQuery bgstretcher प्लगइन (http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html) के समान प्रभाव चाहता हूं, लेकिन मैं उस प्लगइन का उपयोग नहीं कर सकता क्योंकि मैं पहले से ही पृष्ठ पर पृष्ठभूमि छवि के लिए इसका उपयोग कर रहा हूं, और ऐसा लगता है कि जब आप इसे कई उदाहरणों को आजमाते हैं और सक्रिय करते हैं तो ऐसा नहीं लगता है ।

तो मैं जो कुछ पूछ रहा हूं वह कुछ सरल jQuery फ़ंक्शन के लिए है जो एक छवि को पूरी तरह से ओवरफ्लो के साथ एक div भरने के लिए आकार देता है, ताकि कोई अंतराल न हो, लेकिन छवि को स्केव किए बिना।

संपादित करें:

http://jsfiddle.net/R7UCZ/

है कि मैं क्या कर रहा हूँ के बाद की तरह है कि, लेकिन मैं करने के लिए छवि skewing बिना पूरे div भरने चाहते हैं। यदि छवि div से थोड़ी दूर हो जाती है, तो यह ठीक है, लेकिन मुझे इसे div के साथ आकार बदलने की आवश्यकता है, जो पेज के साथ आकार और चौड़ाई दोनों का आकार बदलता है।

Answer 1

सबसे पहले आप छवि गुण प्राप्त हैं और देखते हैं जो एक बड़ा है की जरूरत है, ऊंचाई या चौड़ाई, तो div आकार के आधार पर छवि का आकार के बाद खिड़की, आकार बदलता है इस तरह:

//this would load up initially, you will need this data for future processing 


    div = $("div"); 
    imgsrc = div.find('img').attr('src'); 

    var img = new Image() 
    img.onload = function(){ 
     imgw = img.width; 
     imgh = img.height; 

     //after its loaded and you got the size.. 
     //you need to call it the first time of course here and make it visible: 

     resizeMyImg(imgw,imgh); 
     div.find('img').show(); 

     //now you can use your resize function 
     $(window).resize(function(){ resizeMyImg(imgw,imgh) }); 

     } 
    img.src = imgsrc 


    function resizeMyImg(w,h){  
     //the width is larger 
     if (w > h) { 
     //resize the image to the div 
     div.find('img').width(div.innerWidth() + 'px').height('auto'); 
     }   
     else { 
     // the height is larger or the same 
     //resize the image to the div 
     div.find('img').height(div.innerHeight() + 'px').width('auto'); 
     } 

    } 

आप वास्तव में यहां एक संपूर्ण समाधान मिल सकता है: http://jsfiddle.net/CDywS/1

Answer 2

आप बस इस तरह कर सकते हैं:

<img src="your_picture.png" alt="" style="width:100%;height:100%"></img> 

और जब अपने कंटेनर div आकार बदलता छवि को ही खिंचाव पूरे div को भरने के लिए होगा।

संपादित करें:

आप नहीं चाहते हैं तिरछा छवि के लिए:

<img src="your_picture.png" alt="" style="width:100%"></img> 

या:

<img src="your_picture.png" alt="" style="height:100%"></img> 

जो आयाम आप अतिप्रवाह नहीं करना चाहते पर निर्भर करता है ...

Answer 3

आपको जावास्क्रिप्ट/jQuery की बिल्कुल आवश्यकता नहीं है। बस background-size के लिए contain या cover मूल्यों का उपयोग करें:

1. background-size: contain छवि मापता है यह अधिकतम चौड़ाई/ऊंचाई है, ताकि पूरे छवि दिखाई दे रहा है, जबकि पहलू अनुपात के संरक्षण। (कोई ओवरफ्लो नहीं)

2. background-size: cover छवि को मैक्सीम चौड़ाई में स्केल करता है ताकि पहलू अनुपात को संरक्षित करते समय पूरे div छवि से भरा हो।

   #myDiv { 
       background-size: contain; 
   } 
   

   या::

   #myDiv { 
       background-size: cover; 
   } 
   

   अधिक जानकारी: http://css-tricks.com/perfect-full-page-background-image/

इसलिए, आप सिर्फ इस कोड लिखने की जरूरत है (अतिप्रवाह यदि छवि नहीं वर्ग है) अद्यतन: Demo

Answer 4

ज़ी टी का उत्तर सही के रूप में चिह्नित किया गया है और यह नौकरी करता है - लेकिन केवल परिदृश्य उन्मुख छवियों के लिए। पोर्ट्रेट छवियां इसके साथ काम नहीं करती हैं, क्योंकि आप देख सकते हैं कि आप jsfiddle उदाहरण में ऐसी छवि को आजमाते हैं या नहीं।

हालांकि, आप छवि को ऊंचाई वाले div को देकर इसे काम कर सकते हैं। आप या तो न्यूनतम या ऊंचाई के लिए एक निश्चित मूल्य दे सकते हैं, या तो काम करेंगे।

div.find('img').height(div.innerHeight() + 'px').width('auto'); 

div.innerHeight अपरिभाषित है जब तक कि div ऊंचाई या न्यूनतम ऊंचाई सीएसएस इसके साथ जुड़े विशेषता है:

इस का कारण यह है कि resizeMyImg समारोह, लाइन में है।