Wie können Sie die Größe eines großen Bilds automatisch ändern, damit es in einen Div-Container mit kleinerer Breite passt, während das Verhältnis von Breite zu Höhe beibehalten wird?
Beispiel: stackoverflow.com - Wenn ein Bild in das Editorfenster eingefügt wird und das Bild zu groß ist, um auf die Seite zu passen, wird die Größe des Bilds automatisch geändert.
html
css
image
autoresize
001
quelle
quelle
Antworten:
Wenden Sie keine explizite Breite oder Höhe auf das Bild-Tag an. Geben Sie es stattdessen:
Auch
height: auto;
wenn Sie nur eine Breite angeben möchten.Beispiel: http://jsfiddle.net/xwrvxser/1/
quelle
<a>
Tag wurde die Bildgröße nicht geändert. Das Anwenden der Regeln auf das A-Tag löste dieses Problem.Objektanpassung
Es stellt sich heraus, dass es einen anderen Weg gibt, dies zu tun.
wird die Arbeit machen. Es ist CSS 3 Zeug.
Geige: http://jsfiddle.net/mbHB4/7364/
quelle
object-fit: cover
Derzeit gibt es bei Bildern mit fester Größe wie JPEGs oder PNG-Dateien keine Möglichkeit, dies deterministisch korrekt durchzuführen.
Um die Größe eines Bildes proportional zu ändern, müssen Sie entweder die Höhe oder die Breite auf "100%" einstellen , aber nicht beide. Wenn Sie beide auf "100%" einstellen, wird Ihr Bild gestreckt.
Die Wahl der Höhe oder Breite hängt von Ihren Bild- und Behälterabmessungen ab:
height="100%"
das Bild festlegen .width="100%"
das Bild festlegen .Wenn es sich bei Ihrem Bild um eine SVG-Datei handelt, bei der es sich um ein Vektorbildformat mit variabler Größe handelt, kann die Erweiterung für den Container automatisch erfolgen.
Sie müssen nur sicherstellen, dass für die SVG-Datei keine dieser Eigenschaften im
<svg>
Tag festgelegt ist:Die meisten Vektorzeichnungsprogramme legen diese Eigenschaften beim Exportieren einer SVG-Datei fest, sodass Sie Ihre Datei bei jedem Export manuell bearbeiten oder ein Skript schreiben müssen, um dies zu tun.
quelle
background-size: contain
.Hier ist eine Lösung, die Ihr Bild sowohl vertikal als auch horizontal innerhalb eines Divs ausrichtet, ohne es zu dehnen, selbst wenn das gelieferte Bild zu klein oder zu groß ist, um in das Div zu passen.
Der HTML-Inhalt:
Der CSS-Inhalt:
Der jQuery-Teil:
quelle
Mach es einfach!
Geben Sie dem Container einen festen
height
und setzen Sie dann für das darin enthalteneimg
Tagwidth
undmax-height
.Der Unterschied besteht darin, dass Sie
width
100 auf 100% setzen, nicht aufmax-width
.quelle
Ein wunderschöner Hack.
Sie haben zwei Möglichkeiten, um das Bild ansprechbar zu machen.
Führen Sie es hier aus
Aber man sollte
img
Tag verwenden, um Bilder zu platzieren, da es besser ist alsbackground-image
in Bezug auf SEO, da man Schlüsselwörter inalt
dasimg
Tag schreiben kann . Hier können Sie das Bild reaktionsfähig machen.Führen Sie es hier aus
quelle
Sie können das Bild als Hintergrund für ein Div festlegen und dann die Eigenschaft CSS-Hintergrundgröße verwenden :
Es wird "Skalieren Sie das Hintergrundbild so groß wie möglich, damit der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird. Einige Teile des Hintergrundbilds sind möglicherweise nicht im Hintergrundpositionierungsbereich sichtbar" - W3Schools
quelle
alt
Werte und dergleichen (obwohl Sie auch ein Dummy-Bild hinzufügen können, das für Technologien ohne Assistenten unsichtbar ist), oder Sie müssen es möglicherweise anklickbar machen.background-size: contain
und ich denke, ich würde persönlich die Dummy-Bildroute gehen, nur weil es keinen wirklich einfachen Weg gibt, das hier beschriebene ohne JavaScript zu tunSchauen Sie sich meine Lösung an: http://codepen.io/petethepig/pen/dvFsA
Es ist in reinem CSS ohne JavaScript-Code geschrieben. Es kann Bilder jeder Größe und Ausrichtung verarbeiten.
Angesichts eines solchen HTML:
Der CSS-Code wäre:
quelle
Ich habe gerade ein jQuery-Plugin veröffentlicht, das mit vielen Optionen genau das tut, was Sie brauchen:
https://github.com/GestiXi/image-scale
Verwendungszweck:
HTML
JavaScript
quelle
Diese Lösung streckt das Bild nicht und füllt den gesamten Container, schneidet jedoch einen Teil des Bildes.
HTML:
CSS:
quelle
Ich sehe, dass viele Leute eine Objektanpassung vorgeschlagen haben, was eine gute Option ist. Aber wenn Sie möchten, dass es auch in älteren Browsern funktioniert , gibt es eine andere Möglichkeit, dies einfach zu tun.
Es ist ganz einfach. Der Ansatz, den ich gewählt habe, bestand darin, das Bild mit Absolut im Container zu positionieren und es dann mit der Kombination genau in der Mitte zu platzieren :
Sobald es in der Mitte ist, gebe ich dem Bild,
Dadurch erhält das Bild den Effekt von Object-Fit: Cover.
Hier ist eine Demonstration der obigen Logik.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Diese Logik funktioniert in allen Browsern.
quelle
Folgendes funktioniert perfekt für mich:
quelle
Ich habe eine viel bessere Lösung ohne JavaScript. Es ist voll ansprechbar und ich benutze es oft. Sie müssen häufig ein Bild eines beliebigen Seitenverhältnisses an ein Containerelement mit einem bestimmten Seitenverhältnis anpassen. Und es ist ein Muss, wenn diese ganze Sache voll ansprechbar ist.
Sie können die maximale Breite und Höhe unabhängig voneinander einstellen. Das Bild berücksichtigt das kleinste (abhängig von den Werten und dem Seitenverhältnis des Bildes). Sie können das Bild auch so einstellen, dass es wie gewünscht ausgerichtet wird (z. B. können Sie ein Produktbild auf einem unendlichen weißen Hintergrund leicht in der Mitte unten positionieren).
quelle
Geben Sie dem div, das das <img> -Tag enthält, die Höhe und Breite ein, die Sie für Ihr Bild benötigen. Vergessen Sie nicht, die Höhe / Breite im richtigen Stil-Tag anzugeben.
Geben Sie im <img> -Tag das
max-height
undmax-width
als 100% an.Sie können die Details in den entsprechenden Klassen hinzufügen, nachdem Sie es richtig gemacht haben.
quelle
Der folgende Code wurde aus früheren Antworten übernommen und von mir anhand eines Bildes mit dem Namen getestet
storm.jpg
.Dies ist der vollständige HTML-Code für eine einfache Seite, auf der das Bild angezeigt wird. Dies funktioniert perfekt und wurde von mir mit www.resizemybrowser.com getestet. Fügen Sie den CSS-Code oben in Ihren HTML-Code unter Ihrem Kopfbereich ein. Geben Sie den Bildcode an einer beliebigen Stelle ein.
quelle
quelle
Sie müssen dem Browser mitteilen, in welcher Höhe Sie ihn platzieren:
quelle
Bearbeiten: Die vorherige tabellenbasierte Bildpositionierung hatte Probleme in Internet Explorer 11 (
max-height
funktioniert nicht indisplay:table
Elementen). Ich habe es durch eine Inline-basierte Positionierung ersetzt, die nicht nur in Internet Explorer 7 und Internet Explorer 11 funktioniert, sondern auch weniger Code erfordert.Hier ist meine Sicht auf das Thema. Es funktioniert nur, wenn der Container eine bestimmte Größe hat (
max-width
undmax-height
nicht mit Containern auszukommen scheint, die keine konkrete Größe haben), aber ich habe den CSS-Inhalt so geschrieben, dass er wiederverwendet werden kann (picture-frame
Klasse hinzufügen) undpx125
Größenklasse zu Ihrem vorhandenen Container).In CSS:
Und in HTML:
DEMO
Code-Snippet anzeigen
Bearbeiten: Mögliche weitere Verbesserung mit JavaScript (Hochskalieren von Bildern):
quelle
line-height
. Wenn altern Text mehr als eine Zeile hat, wird es wirklich schlecht aussehen ...Ich habe dieses Problem mit dem folgenden Code behoben:
quelle
Wie hier beantwortet , können Sie auch
vh
Einheiten verwenden, anstatt,max-height: 100%
wenn dies in Ihrem Browser nicht funktioniert (wie Chrome):quelle
vh
? und was funktioniert in Chrome nicht?max-height: xx%
(prozentuale Einheit) funktioniert in Chrome nicht mit einigen Elementen wieimg
, abervh
Einheit funktioniert. Allerdings Prozent arbeiten mitheight
,width
,max-width
etc.Ich habe ein Bild innerhalb eines Hyperlinks sowohl horizontal als auch vertikal proportional zentriert und skaliert:
Es wurde in Internet Explorer, Firefox und Safari getestet.
Weitere Informationen zum Zentrieren finden Sie hier .
quelle
Die akzeptierte Antwort von Thorn007 funktioniert nicht, wenn das Bild zu klein ist .
Um dies zu lösen, habe ich einen Skalierungsfaktor hinzugefügt . Auf diese Weise wird das Bild größer und der div-Container gefüllt.
Beispiel:
Anmerkungen:
-webkit-transform:scale(4); -webkit-transform-origin:left top;
den Stil hinzufügen .quelle
Wenn Sie Bootstrap verwenden, müssen Sie nur die
img-responsive
Klasse zumimg
Tag hinzufügen :Bootstrap-Bilder
quelle
Eine einfache Lösung (4-Schritt-Korrektur !!), die für mich zu funktionieren scheint, finden Sie unten. In diesem Beispiel wird die Breite verwendet, um die Gesamtgröße zu bestimmen. Sie können sie jedoch auch umdrehen, um stattdessen die Höhe zu verwenden.
%
für Bemaßungen die relative Größe oder die automatische Skalierung (basierend auf dem Bildcontainer oder der Anzeige).px
(oder eine andere) für eine statische oder festgelegte DimensionZum Beispiel,
quelle
Alle bereitgestellten Antworten, einschließlich der akzeptierten, funktionieren nur unter der Annahme, dass der
div
Wrapper eine feste Größe hat. So geht's, unabhängig von der Größe desdiv
Wrappers, und dies ist sehr nützlich, wenn Sie eine reaktionsfähige Seite entwickeln:Schreiben Sie diese Erklärungen in Ihren
DIV
Selektor:Fügen Sie dann diese Erklärungen in Ihren
IMG
Selektor ein:SEHR WICHTIG:
Der Wert
maxHeight
muss das sein gleiche sowohl für dieDIV
undIMG
Wähler.quelle
Eine einfache Lösung ist die Verwendung von Flexbox. Definieren Sie das CSS des Containers wie folgt:
Stellen Sie die enthaltene Bildbreite auf 100% ein und Sie sollten ein schönes zentriertes Bild im Container erhalten, wobei die Abmessungen erhalten bleiben.
quelle
Die Lösung ist einfach mit ein bisschen Mathematik ...
Fügen Sie das Bild einfach in ein div und dann in die HTML-Datei ein, in der Sie das Bild angeben. Stellen Sie die Werte für Breite und Höhe in Prozent ein, indem Sie die Pixelwerte des Bildes verwenden, um das genaue Verhältnis von Breite zu Höhe zu berechnen.
Angenommen, Sie haben ein Bild mit einer Breite von 200 Pixel und einer Höhe von 160 Pixel. Sie können mit Sicherheit sagen, dass der Breitenwert 100% beträgt, da es sich um den größeren Wert handelt. Um dann den Höhenwert zu berechnen, teilen Sie einfach die Höhe durch die Breite, was den Prozentwert von 80% ergibt. Im Code sieht es ungefähr so aus ...
quelle
Der einfachste Weg, dies zu tun, ist die Verwendung von
object-fit
:Wenn Sie Bootstrap verwenden, fügen Sie einfach die
img-responsive
Klasse hinzu und ändern Sie zuquelle
Überprüfen Sie meine Antwort: Machen Sie ein Bild reaktionsschnell - einfachster Weg -
quelle
Oder Sie können einfach verwenden:
Jetzt nimmt das Bild den gesamten Raum des Div ein.
quelle