Jak mogę dynamicznie zmieniać rozmiar obrazu za pomocą CSS, gdy zmienia się szerokość / wysokość przeglądarki?

107

Zastanawiam się, jak mogłem zmienić rozmiar obrazu wraz z oknem przeglądarki, oto co zrobiłem do tej pory (lub pobrać całą witrynę w formacie ZIP ).

Działa to dobrze w Firefoksie, ale ma problemy w Chrome: obraz nie zawsze zmienia rozmiar, w jakiś sposób zależy to od rozmiaru okna, w którym strona została załadowana.

Działa to również dobrze w Safari, ale czasami obraz jest ładowany z minimalną szerokością / wysokością. Może jest to spowodowane rozmiarem obrazu, nie jestem pewien. (Jeśli ładuje się dobrze, spróbuj kilka razy odświeżyć, aby zobaczyć błąd).

Jakieś pomysły, jak mogę uczynić to bardziej kuloodpornym? (Jeśli JavaScript będzie potrzebny, też mogę z tym żyć, ale preferowany jest CSS).

depi
źródło
Użyj zapytań o media CSS3 lub modułu obsługi zdarzeń window.onresize języka JavaScript. w3schools.com/jsref/event_onresize.asp
Shahid
Jeśli używasz bootstrap, dodaj klasę taką jak ta class = "img-thumbnail". To wszystko.
VivekDev

Odpowiedzi:

179

To może być wykonane z czystego CSS i nie wymaga nawet zapytań multimedialnych.

Aby obrazy były elastyczne, po prostu dodaj max-width:100%i height:auto. Obraz max-width:100%i height:autodziała w IE7, ale nie w IE8 (tak, kolejny dziwny błąd w IE). Aby to naprawić, musisz dodać width:auto\9do IE8.

źródło: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

A jeśli chcesz wymusić stałą maksymalną szerokość obrazu, po prostu umieść go w kontenerze, na przykład:

<div style="max-width:500px;">
    <img src="..." />
</div>

Przykład JSFiddle tutaj . Nie jest wymagany JavaScript. Działa w najnowszych wersjach Chrome, Firefox i IE (czyli wszystko, co testowałem).

Kurt Schindler
źródło
Testowałem łącze jsfiddle zarówno z Operą 11, jak i niektórymi nowszymi Firefoksem i chociaż ładnie zmienia rozmiar obrazu, gdy okno się kurczy, nie robi tego, gdy okno rośnie powyżej 650 pikseli
GDR
3
@GDR Nie chciałbym, aby obraz przekroczył swój natywny rozmiar, po prostu rozpikselowałby się i wyglądał brzydko. Jeśli chcesz powiększyć, po prostu zacznę od większego obrazu.
Kurt Schindler
OK, więc błędnie założyłem, że o to chodzi w tym pytaniu, przepraszam.
NRD
2
Ustawienie max-width na 100% i height na auto nic dla mnie nie pomogło - rzeczywiście pracowałem z kontenerem. Zawiń obraz w element div, ustaw maksymalną wysokość / szerokość i pozwól, aby obraz (#div img {}) miał szerokość 100% i wysokość 100%.
Mave
1
Co to za magia?! To jest niesamowite!
Leonardo Wildt
24

2018 i późniejsze rozwiązanie:

Korzystanie z jednostek zależnych od widocznego obszaru powinno znacznie ułatwić Ci życie, biorąc pod uwagę, że mamy obraz kota:

kot

Teraz chcemy, aby ten kot znajdował się w naszym kodzie, z zachowaniem proporcji:

img {
  width: 100%;
  height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Na razie niezbyt interesujące, ale co by było, gdybyśmy chcieli zmienić szerokość kotów na maksymalnie 50% widocznego obszaru?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Ten sam obraz, jednak teraz ograniczony do szerokości maksymalnej w 50vw vw (= wziernika szerokość) oznacza, że obraz będzie X szerokość widoku, w zależności od przewidzianego cyfry. Działa to również dla wysokości:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Ogranicza to wysokość obrazu do maksymalnie 20% obszaru roboczego.

roberrrt-s
źródło
dzięki! Jak określić vh i vw, jeśli mam obrazy o różnych rozmiarach?
Herman Toothrot
Cześć @HermanToothrot, czy mówisz, że chcesz zachować proporcje podczas używania jednostek widoku?
roberrrt-s
@Roberrrt mówi, że mam kilka obrazów o różnych rozmiarach i w bloku inline i chcę zachować proporcje wszystkich z nich, ale ustawić je na tę samą wysokość lub szerokość.
Herman Toothrot
Albo szerokość: 100% i maksymalna wysokość: 50vh lub odwrotnie
roberrrt-s
@Roberrrt width: 100% nie wydaje się mieć większego wpływu. Muszę tylko zgadywać vh, w moim przypadku 50 to za dużo, a 40 maksymalizuje wysokość wszystkich obrazów.
Herman Toothrot
11
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

W IE onresizezdarzenie jest uruchamiane przy każdej zmianie piksela (szerokości lub wysokości), więc może wystąpić problem z wydajnością. Opóźnij zmianę rozmiaru obrazu o kilka milisekund za pomocą funkcji window.setTimeout () języka JavaScript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Shahid
źródło
6

Ustaw właściwość resize na oba. Następnie możesz zmienić szerokość i wysokość w następujący sposób:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}
fmoradi9
źródło
5

Czy używasz jQuery?

Ponieważ szybko przeszukałem wtyczki jQuery i wydaje się, że mają do tego jakąś wtyczkę, sprawdź tę, powinna działać:

http://plugins.jquery.com/project/jquery-afterresize

EDYTOWAĆ:

To jest rozwiązanie CSS, po prostu dodaję style = "width: 100%" i działa dla mnie przynajmniej w Chrome i Safari. Nie mam ie, więc po prostu przetestuj i daj mi znać, oto kod:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>
Arthur Neves
źródło
1
jQuery nie jest konieczne w przypadku tak prostego problemu. Dlaczego ładowanie 50 KB + (całej biblioteki) miałoby być korzystne w przypadku kilku wierszy JS?
1
Jasne, masz całkowitą rację, s why Ipytam go, czy używa jQuery, bo jeśli tak, to może być dobry pomysł, po prostu dodaj wtyczkę!
Arthur Neves,
więc bez JS nie jest to możliwe? Znalazłem proste rozwiązanie takie jak to unstoppablerobotninja.com/search/… , jednak nie udało mi się w pełni zaimplementować go w moim szablonie
depi
4

Początkowo korzystałem z następującego html / css:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}
<div> 
  <img src="..." />
</div>

Następnie dodałem class="img"do <div> tego:

<div class="img">
  <img src="..." />
</div>

I wszystko zaczęło działać dobrze.

Rin
źródło
2

Po prostu użyj tego kodu. To, o czym większość zapomina, to określenie max-width jako maksymalnej szerokości obrazu

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

Sprawdź tę demonstrację http://shorturl.at/nBKVY

Daniel Nyamasyo
źródło
0

Próbować

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Działa tylko z blokiem wyświetlania i blokiem inline, nie ma to wpływu na elementy flex, ponieważ właśnie spędziłem całe wieki próbując się dowiedzieć.

Ryan Stone
źródło