Skalowanie HTML img

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.

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.

css wystarczy:

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

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 .

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

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

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ą

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!