Skalowanie HTML img

114

Próbuję wyświetlić duże obrazy z tagami HTML img. W tej chwili odchodzą od krawędzi ekranu; jak mogę je skalować, aby pozostały w oknie przeglądarki?

Czy też w przypadku prawdopodobnego przypadku, gdy nie jest to możliwe, czy można przynajmniej powiedzieć „wyświetl ten obraz w 50% jego normalnej szerokości i wysokości”?

Atrybuty szerokości i wysokości zniekształcają obraz - o ile wiem, dzieje się tak dlatego, że odnoszą się do wszelkich atrybutów, z którymi może się skończyć kontener, a które będą niezwiązane z obrazem. Nie mogę określić pikseli, ponieważ mam do czynienia z dużą kolekcją obrazów, z których każdy ma inny rozmiar w pikselach. Maksymalna szerokość nie działa.

html image-scaling

— rwallace
źródło

4

Pamiętaj, że nie zaleca się wysyłania dużych obrazów i zmniejszania ich za pomocą CSS. Lepiej mieć różne wersje tego samego obrazu, aby zaoszczędzić przepustowość i sprawić, że strona będzie bardziej responsywna (nawet jeśli obraz będzie wyglądał na mały, zostanie wysłany pełny obraz).

— Esteban Küber

1

rwallace, czy używasz .net lub PHP lub czegoś innego niż czysty HTML?

— Dorjan

1

Rozmiar pliku obrazu nie ma znaczenia, nie ma wymogu w przypadku, gdy chcę być oszczędny z przepustowością. Używam PHP, ale rozwiązanie HTML działa.

— rwallace

135

Ustaw tylko widthlub height, a pozostałe automatycznie skaluje. I tak, możesz użyć procentu.

Pierwszą część można wykonać, ale wymaga JavaScript, więc może nie działać dla wszystkich użytkowników.

— RiddlerDev
źródło

7

Proszę, pamiętaj, że zrobienie tego w przypadku dużych obrazów spowoduje długi czas pobierania stron, które nie powinny mieć długich czasów pobierania. Jeśli to możliwe, zawsze lepiej jest zmienić rozmiar obrazu.

— ceejayoz

Dzięki! Okazuje się, że twoje rozwiązanie polegające tylko na ustawieniu szerokości działa nie tylko dla prawidłowego skalowania, ale w rzeczywistości działa również na pierwszą część, ustawiając szerokość na 100%.

— rwallace

2

@ceejayoz Zgadzam się, ale nie o to prosi.

— RiddlerDev

@ceejayoz Zastanawiam się, dlaczego to trwa dłużej? Czy nie musi zmieniać rozmiaru, gdy wyświetla go w obu sytuacjach? A może chcesz ręcznie zmienić rozmiar rzeczywistego obrazu i zmienić plik?

— Abdul

2

@Abdul Mówię, że obraz 3000x3000 pikseli 5 MB nie powinien być używany w slocie 100x100 pikseli w Twojej witrynie.

— ceejayoz

18

css wystarczy:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/

— Selvadurai Handeeban
źródło

9

Wiem, że to pytanie padało od dawna, ale na dzień dzisiejszy jedna prosta odpowiedź brzmi:

<img src="image.png" style="width: 55vw; min-width: 330px;" />

Użycie tu vw mówi, że szerokość odnosi się do 55% szerokości widocznego obszaru.

Obsługują to wszystkie główne przeglądarki.

Sprawdź ten link .

— Dimitri de Jesus
źródło

1

vwbył dla mnie ratunkiem, inne metody nie działały w przypadku obrazu.

— Caram

6

Nie jest wymagany Javascript.

IE6 Internet Explorer 6

Procent działa tylko dla szerokości elementu, ale height:100%;nie działa bez prawidłowego kodu.

CSS

html, body { height:100%; }

Następnie użycie wartości procentowej działa poprawnie i dynamicznie aktualizuje się przy zmianie rozmiaru okna.

<img src="image.jpg" style="height:80%;">

Nie potrzebujesz atrybutu szerokości, szerokość jest skalowana proporcjonalnie do zmiany rozmiaru okna przeglądarki.

I ten mały klejnot na wypadek, gdyby obraz został przeskalowany, nie będzie wyglądał (zbyt) blokowo (interpoluje).

img { -ms-interpolation-mode: bicubic; }

Rekwizyty trafiają do tego źródła: Ultimate IE6 Cheatsheet: Jak naprawić ponad 25 błędów przeglądarki Internet Explorer 6

— niezidentyfikowany-1
źródło

6

Dodawanie max-width: 100%;do imgtagu działa dla mnie.

— Ralph David Abernathy
źródło

2

Myślę, że najlepszym rozwiązaniem jest zmiana rozmiaru obrazów za pomocą skryptu lub lokalnie i ponowne ich przesłanie. Pamiętaj, że zmuszasz swoich widzów do pobierania większych plików, niż potrzebują

— riotera
źródło

0

Najlepszy sposób, w jaki wiem, jak to zrobić, to:

1) ustaw przepełnienie na przewijanie, dzięki czemu obraz pozostanie, ale możesz go przewinąć, aby go zobaczyć

2) prześlij mniejszy obraz. Teraz podczas przesyłania jest wiele programów (będziesz potrzebować czegoś takiego jak PHP lub .net, aby to zrobić), możesz je automatycznie skalować.

3) Życie z nim i ustawianie szerokości i wysokości, chociaż spowoduje to, że będzie wyglądać na zniekształcone, ale właściwy rozmiar nadal spowoduje, że użytkownik będzie musiał pobrać obraz w pełnym rozmiarze.

Powodzenia!

— Dorjan
źródło