HTML img Skalierung

114

Ich versuche, einige große Bilder mit HTML-IMG-Tags anzuzeigen. Im Moment verlassen sie den Rand des Bildschirms; Wie kann ich sie skalieren, um im Browserfenster zu bleiben?

Oder kann man in dem wahrscheinlichen Fall, dass dies nicht möglich ist, zumindest sagen "Dieses Bild in 50% seiner normalen Breite und Höhe anzeigen"?

Die Attribute width und height verzerren das Bild - soweit ich das beurteilen kann, liegt dies daran, dass sie sich auf die Attribute beziehen, mit denen der Container möglicherweise endet und die nichts mit dem Bild zu tun haben. Ich kann keine Pixel angeben, da ich mich mit einer großen Sammlung von Bildern mit jeweils unterschiedlichen Pixelgrößen befassen muss. Die maximale Breite funktioniert nicht.

html image-scaling rwallace
quelle
4
Denken Sie daran, dass es nicht empfohlen wird, große Bilder zu senden und sie mit CSS klein zu machen. Es ist besser, verschiedene Versionen desselben Bildes zu haben, um Bandbreite zu sparen und die Seite reaktionsfähiger zu machen (selbst wenn das Bild klein aussieht, wird das vollständige Bild gesendet).
Esteban Küber
1
rwallace, verwenden Sie .net oder PHP oder etwas anderes als reines HTML?
Dorjan
1
Die Größe der Bilddatei spielt keine Rolle, es gibt keine Anforderung für den Fall, dass ich sparsam mit der Bandbreite umgehen möchte. Ich benutze PHP, aber die HTML-Lösung funktioniert.
Wallace

Antworten:

135

Stellen Sie nur das widthoder ein height, und das andere wird automatisch skaliert. Und ja, Sie können einen Prozentsatz verwenden.

Der erste Teil kann ausgeführt werden, erfordert jedoch JavaScript und funktioniert möglicherweise nicht für alle Benutzer.

RiddlerDev
quelle
7
Bitte, bitte, bitte beachten Sie, dass dies bei massiven Bildern zu langen Downloadzeiten für Seiten führt, die keine langen Downloadzeiten haben sollten. Es ist immer besser, die Bildgröße nach Möglichkeit zu ändern.
Ceejayoz
Vielen Dank! Es stellt sich heraus, dass Ihre Lösung, nur die Breite einzustellen, nicht nur für die korrekte Skalierung funktioniert, sondern auch den ersten Teil, indem Sie die Breite auf 100% einstellen.
Wallace
2
@ceejayoz Ich stimme zu, aber das ist nicht, was er fragt.
RiddlerDev
@ceejayoz Ich frage mich, warum dauert es länger? Muss die Größe nicht geändert werden, wenn es für beide Situationen angezeigt wird? Oder sagen Sie, die Größe des tatsächlichen Bildes manuell zu ändern und die Datei zu ändern?
Abdul
2
@Abdul Ich sage, ein 5 MB großes Bild mit 3.000 x 3.000 Pixel sollte nicht in einem 100 x 100 Pixel großen Steckplatz auf Ihrer Website verwendet werden.
Ceejayoz
18

CSS ist genug:

width : desired_width;
height: auto;/*to preserve the aspect ratio of the image*/
Selvadurai Handeeban
quelle
9

Ich weiß, dass diese Frage schon lange gestellt wurde, aber bis heute lautet eine einfache Antwort:

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

Die Verwendung von vw hier zeigt an, dass die Breite relativ zu 55% der Breite des Ansichtsfensters ist.

Alle gängigen Browser unterstützen dies heutzutage.

Überprüfen Sie diesen Link .

Dimitri de Jesus
quelle
1
vwwar ein Lebensretter für mich, die anderen Methoden haben für das Bild nicht funktioniert.
Karam
6

Kein Javascript erforderlich.

IE6 Internet Explorer 6

Prozent funktioniert nur für die Breite eines Elements, aber height:100%;nicht ohne den richtigen Code.

CSS

html, body { height:100%; }

Die Verwendung eines Prozentsatzes funktioniert dann ordnungsgemäß und wird beim Ändern der Fenstergröße dynamisch aktualisiert.

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

Sie benötigen kein width-Attribut. Die Breite wird proportional skaliert, wenn die Größe des Browserfensters geändert wird.

Und dieses kleine Juwel, falls das Bild vergrößert wird, sieht es nicht (übermäßig) blockig aus (es interpoliert).

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

Requisiten gehen zu dieser Quelle: Ultimate IE6 Cheatsheet: So beheben Sie mehr als 25 Internet Explorer 6-Fehler

nicht identifiziert-1
quelle
6

Das Hinzufügen max-width: 100%;zum imgTag funktioniert bei mir.

Ralph David Abernathy
quelle
2

Ich denke, die beste Lösung ist, die Größe der Bilder per Skript oder lokal zu ändern und sie erneut hochzuladen. Denken Sie daran, dass Sie Ihre Zuschauer dazu zwingen, größere Dateien herunterzuladen, als sie benötigen

Riotera
quelle
0

Ich weiß am besten, wie das geht:

1) Stellen Sie den Überlauf auf Scrollen ein und auf diese Weise bleibt das Bild erhalten, aber Sie können scrollen, um es stattdessen zu sehen

2) Laden Sie ein kleineres Bild hoch. Jetzt gibt es viele Programme beim Hochladen (Sie benötigen etwas wie PHP oder .net, um dies zu tun). Sie können es automatisch skalieren lassen.

3) Wenn Sie damit leben und die Breite und Höhe einstellen, wird es zwar verzerrt aussehen, aber die richtige Größe führt immer noch dazu, dass der Benutzer das Bild in voller Größe herunterladen muss.

Viel Glück!

Dorjan
quelle