Rozciągnij obraz, aby wypełnić element div, ale nie pochyl się.

Question

Próbuję rozciągnąć obraz, aby zmieścił się wewnątrz elementu div. Jednak chcę, aby to się przepełniło, aby cały div był wypełniony. Rozmiar div zmienia się wraz ze stroną. Chcę mieć efekt podobny do wtyczki jQuery bgstretcher (http://www.ajaxblender.com/bgstretcher-2-jquery-stretch-background-plugin-updated.html), ale nie mogę używać tej wtyczki, ponieważ używam jej już dla obrazu tła na stronie i wygląda na to, że nie działa, gdy próbujesz aktywować wiele jej instancji .

To, o co pytam, dotyczy prostej funkcji jQuery, która zmienia rozmiar obrazu, aby całkowicie wypełnić element div z ukrytym przepełnieniem, tak aby nie było żadnych przerw, ale bez pochylania obrazu.

Edit:

http://jsfiddle.net/R7UCZ/

To jakby co jestem po, ale chcę obraz do wypełnić całą div bez wypaczenia. Jeśli obraz zniknie trochę z div, jest to w porządku, ale potrzebuję go do zmiany rozmiaru za pomocą elementu div, który zmienia rozmiar wraz ze stroną, zarówno wysokością, jak i szerokością.

Answer 1

Najpierw trzeba uzyskać właściwości obrazu i zobaczyć, który z nich jest większy, wysokość lub szerokość, a następnie zmienić rozmiar obrazu na podstawie rozmiaru div po zamknięciu okna zmienia rozmiar, tak:

//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'); 
     } 

    } 

ty w rzeczywistości można znaleźć kompletne rozwiązanie: http://jsfiddle.net/CDywS/1

Answer 2

Można po prostu zrobić tak:

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

A gdy kontener div zmienia rozmiar obrazu będzie rozciągać się, aby wypełnić całą div.

EDIT:

Jeśli nie chcesz, aby wypaczyć obraz:

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

Lub:

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

zależności od wymiaru, który nie chce przelewać ...

Answer 3

W ogóle nie potrzebujesz JavaScript/jQuery. Wystarczy użyć wartości contain lub cover dla background-size:

1. background-size: contain skaluje obraz do jego maksymalna szerokość/wysokość tak, że cały obraz jest widoczny przy zachowaniu proporcji. (brak przepełnienia)

2. background-size: cover skaluje obraz do jego maksymalnej szerokości tak, że cały element div jest wypełniony obrazem przy zachowaniu proporcji.(Przepełnienie, jeśli obraz nie jest kwadratowy)

Dlatego wystarczy napisać ten kod:

#myDiv { 
    background-size: contain; 
} 

czyli

#myDiv { 
    background-size: cover; 
} 

Więcej informacji: http://css-tricks.com/perfect-full-page-background-image/

Aktualizacja: Demo

Answer 4

Odpowiedź Zee Tee jest oznaczona jako poprawna i spełnia swoją funkcję - ale tylko w przypadku zdjęć zorientowanych poziomo. Obrazy portretowe z nią nie działają, ponieważ możesz zobaczyć, czy spróbujesz takiego obrazu w przykładzie jsfiddle.

Można jednak sprawić, aby działało, podając element graficzny zawierający obraz o wysokości. Możesz podać albo stałą wartość dla tego, albo minimalną wysokość, albo zadziała.

Powodem tego jest to, że w funkcji resizeMyImg, w linii:

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

div.innerHeight jest nieokreślony, chyba że div ma atrybut wysokość lub min-height CSS z nim związane.