Mam obrazy, które będą dość duże i chcę je zmniejszyć za pomocą jQuery, zachowując ograniczone proporcje, tj. Te same proporcje.
Czy ktoś może wskazać mi jakiś kod lub wyjaśnić logikę?
javascript
jquery
image
resize
kobe
źródło
źródło
max-width
imax-height
na100%
.<img src='image.jpg' width=200>
Odpowiedzi:
Spójrz na ten fragment kodu z http://ericjuden.com/2009/07/jquery-image-resize/
źródło
max-width
imax-height
na100%
. jsfiddle.net/9EQ5cMyślę, że to naprawdę fajna metoda :
źródło
Math.floor
że naprawdę pomoże w zaprojektowaniu perfekcyjnego piksela :-)function imgSizeFit(img, maxWidth, maxHeight){ var ratio = Math.min(1, maxWidth / img.naturalWidth, maxHeight / img.naturalHeight); img.style.width = img.naturalWidth * ratio + 'px'; img.style.height = img.naturalHeight * ratio + 'px'; }
Jeśli dobrze rozumiem pytanie, nie potrzebujesz do tego nawet jQuery. Proporcjonalne zmniejszanie obrazu na kliencie można wykonać za pomocą samego CSS: po prostu ustaw jego
max-width
imax-height
na100%
.Oto skrzypce: http://jsfiddle.net/9EQ5c/
źródło
width: auto; height: auto;
żeby Twój kod działał :)Aby określić proporcje , musisz mieć proporcje, do których chcesz dążyć.
W tym przykładzie używam
16:10
od tego typowego współczynnika proporcji monitora.Wyniki z góry to
147
i300
źródło
właściwie właśnie napotkałem ten problem, a rozwiązanie, które znalazłem, było dziwnie proste i dziwne
i w cudowny sposób obraz jest przeskalowywany do nowej wysokości i zachowując ten sam współczynnik!
źródło
Istnieją 4 parametry tego problemu
Istnieją 3 różne parametry warunkowe
rozwiązanie
to wszystko, co musisz zrobić.
To jest dojrzałe forum, nie podam Ci na to kodu :)
źródło
Robi
<img src="/path/to/pic.jpg" style="max-width:XXXpx; max-height:YYYpx;" >
pomaga?Przeglądarka zadba o zachowanie proporcji.
tj.
max-width
uruchamia się, gdy szerokość obrazu jest większa niż wysokość, a jego wysokość zostanie obliczona proporcjonalnie. podobniemax-height
będzie, gdy wysokość jest większa niż szerokość.Nie potrzebujesz do tego żadnego jQuery ani javascript.
Obsługiwane przez ie7 + i inne przeglądarki ( http://caniuse.com/minmaxwh ).
źródło
Powinno to działać w przypadku obrazów o wszystkich możliwych proporcjach
źródło
Oto poprawka do odpowiedzi Mehdiwaya. Nowa szerokość i / lub wysokość nie zostały ustawione na wartość maksymalną. Dobry przypadek testowy to (1768 x 1075 pikseli): http://spacecoastsports.com/wp-content/uploads/2014/06/sportsballs1.png . (Nie mogłem tego skomentować powyżej z powodu braku punktów reputacji).
źródło
źródło
Jeśli obraz jest proporcjonalny, kod ten wypełni opakowanie obrazem. Jeśli obraz nie jest proporcjonalny, dodatkowa szerokość / wysokość zostanie obcięta.
źródło
Bez dodatkowych zmiennych temp. Lub wsporników.
Pamiętaj: wyszukiwarkom się to nie podoba, jeśli atrybut szerokości i wysokości nie pasuje do obrazu, ale nie znają JS.
źródło
Po kilku próbach i błędach doszedłem do tego rozwiązania:
źródło
Zmianę rozmiaru można osiągnąć (zachowując proporcje) za pomocą CSS. To jeszcze bardziej uproszczona odpowiedź, zainspirowana postem Dana Dascalescu.
http://jsbin.com/viqare
źródło
2 kroki:
Krok 1) Oblicz stosunek oryginalnej szerokości do oryginalnej wysokości obrazu.
Krok 2) pomnóż stosunek oryginalna_szerokość / oryginalna_wysokość przez nową żądaną wysokość, aby uzyskać nową szerokość odpowiadającą nowej wysokości.
źródło
Ten problem można rozwiązać za pomocą CSS.
źródło
To całkowicie zadziałało dla mnie w przypadku elementu, który można przeciągać - aspektRatio: prawda
źródło