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

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).

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).

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:

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.

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

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;
}

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>

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.

Możesz użyć scalewłaściwości CSS3, aby zmienić rozmiar obrazu za pomocą css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Dalsze czytanie :

• CSS3 2D Transforms
• CSS3 Przejścia, transformacje, animacje efektów najechania kursorem

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

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ć.