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).
Odpowiedzi:
To może być wykonane z czystego CSS i nie wymaga nawet zapytań multimedialnych.
CSS:
A jeśli chcesz wymusić stałą maksymalną szerokość obrazu, po prostu umieść go w kontenerze, na przykład:
Przykład JSFiddle tutaj . Nie jest wymagany JavaScript. Działa w najnowszych wersjach Chrome, Firefox i IE (czyli wszystko, co testowałem).
źródło
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:
Na razie niezbyt interesujące, ale co by było, gdybyśmy chcieli zmienić szerokość kotów na maksymalnie 50% widocznego obszaru?
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:
Ogranicza to wysokość obrazu do maksymalnie 20% obszaru roboczego.
źródło
W IE
onresize
zdarzenie 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
źródło
Ustaw właściwość resize na oba. Następnie możesz zmienić szerokość i wysokość w następujący sposób:
źródło
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:
źródło
s why I
pytam go, czy używa jQuery, bo jeśli tak, to może być dobry pomysł, po prostu dodaj wtyczkę!Początkowo korzystałem z następującego html / css:
Następnie dodałem
class="img"
do<div>
tego:I wszystko zaczęło działać dobrze.
źródło
Możesz użyć
scale
właściwości CSS3, aby zmienić rozmiar obrazu za pomocą css:Dalsze czytanie :
źródło
Po prostu użyj tego kodu. To, o czym większość zapomina, to określenie max-width jako maksymalnej szerokości obrazu
Sprawdź tę demonstrację http://shorturl.at/nBKVY
źródło
Próbować
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ć.
źródło