Automatyczne zmienianie rozmiaru obrazu na podstawie wymiarów okna przeglądarki

Question

Mam podstawowy układ strony z nagłówkiem o szerokości 100% i stopką. Między nimi mam dużą grafikę.

Chciałbym, aby grafika zmieniała się dynamicznie w zależności od wielkości okna.

Wolę nie używać lampy błyskowej i zastanawiałem się, czy istnieje prosty sposób, aby to zrobić za pomocą jquery/javascript.

Nie jestem ekspertem od jquery/javascript, więc zastanawiałem się, jak się do tego podejść, że istnieje komponent, który już to robi.

Answer 1

img.thespecialimage { 
    min-height : 100%; 
    min-width : 100%; 
    max-height : 100%; 
    max-width : 100%; 
} 

Answer 2

Ustaw pojemnikach szerokość obrazu w procentach jak w width:{amount}%;, a następnie ustawić szerokość obrazka w procentach również. W ten sposób pojemnik z obrazem rozszerza się wraz ze wzrostem obrazu, a przynajmniej tak się stanie, ponieważ obraz rozszerza się wraz z ekspansją kontenera. Nie musisz koniecznie ustawiać szerokości obrazu na 100%, ale cokolwiek z tobą ustawisz, zależy od szerokości kontenera.

Answer 3

Jeśli chcesz polegać na CSS3 i wyświetlać obraz jako tło w elemencie, rozważ użycie opcji background-size. Przejście tej trasy umożliwia zmianę rozmiaru obrazu przy zachowaniu jego proporcji.

Here's a quick example of background-size.

Może to oczywiście być wykonane ręcznie, jeśli monitorowanie rozmiaru okna za pomocą JS i zmieniać się odpowiednio. Jeśli jesteś zainteresowany tą trasą, daj nam znać. Zalecałbym używanie czystego rozwiązania CSS do czegoś tak banalnego, jeśli to możliwe, aby nie zrazić użytkowników z wyłączonym JS.

Answer 4

<style> 
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;} 
.resize {width:100%; height:auto;} 
</style>  

<div class="wrapper"> 
    <img class="resize" src="image.jpg" /> 
</div> 

Spowoduje to zmianę rozmiaru obrazu w celu dopasowania go do pojemnika i utrzymanie proporcji na miejscu. Jeśli ustawisz pojemnik na procent, wszystko się skaluje.

szerokość wrapper = 960 podzielone przez szerokość ekranu = 1640px

Jeśli chcesz całą witrynę, aby reagować trzeba zrobić matematyki całą drogę w dół. podziel dziecko przez jego rodzica. Mam nadzieję że to pomoże!