Ich möchte ein Bild von einer URL mit einer bestimmten Breite und Höhe anzeigen, auch wenn es ein anderes Größenverhältnis hat. Ich möchte also die Größe ändern (das Verhältnis beibehalten) und dann das Bild auf die gewünschte Größe zuschneiden.
Ich kann die Größe mit der HTML- img
Eigenschaft ändern und mit schneiden background-image
.
Wie kann ich beides machen?
Beispiel:
Dieses Bild:
Hat die Größe 800x600
Pixel und ich möchte wie ein Bild von 200x100
Pixeln zeigen
Mit img
kann ich die Bildgröße ändern 200x150px
:
<img
style="width: 200px; height: 150px;"
src="http://i.stack.imgur.com/wPh0S.jpg">
Das gibt mir folgendes:
<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">
Und mit background-image
kann ich die 200x100
Bildpixel schneiden .
<div
style="background-image:
url('https://i.stack.imgur.com/wPh0S.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Gibt mir:
<div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"> </div>
Wie kann ich beides machen?
Ändern Sie die Größe des Bildes und schneiden Sie es dann auf die gewünschte Größe?
quelle
Mit CSS3 ist es möglich, die Größe eines
background-image
with zu ändernbackground-size
und beide Ziele gleichzeitig zu erreichen.Es gibt eine Reihe von Beispielen auf css3.info .
Implementiert basierend auf Ihrem Beispiel mit donald_duck_4.jpg . In diesem Fall
background-size: cover;
ist es genau das, was Sie wollen - es passtbackground-image
zum gesamten Bereich des Behälters<div>
und schneidet den Überschuss ab (abhängig vom Verhältnis).css3 Hintergrundbild Hintergrundgröße
quelle
<img />
Schauen Sie sich für Tags dieobject-fit: cover
zugehörigen Werte aus der Spezifikation für CSS- Bildwerte und das Modul für ersetzte Inhalte der Stufe 3 an .Haben Sie versucht, dies zu verwenden?
Ich musste die Größe des Bildes ändern, es zentrieren (sowohl vertikal als auch horizontal) und es dann zuschneiden.
Ich war froh festzustellen, dass dies in einer einzigen CSS-Zeile möglich war. Überprüfen Sie das Beispiel hier: http://codepen.io/chrisnager/pen/azWWgr/?editors=110
Hier ist der
CSS
undHTML
Code aus diesem Beispiel:quelle
Das enthaltende div mit schneidet das Bild im Wesentlichen zu, indem der Überlauf ausgeblendet wird.
quelle
quelle
Danke sanchothefat.
Ich habe eine Verbesserung Ihrer Antwort. Da das Zuschneiden für jedes Bild sehr maßgeschneidert ist, sollten diese Definitionen im HTML-Code anstelle von CSS erfolgen.
quelle
quelle
Der folgende Code schneidet Ihr Bild für Sie zu. Sie können mit der Objektanpassung herumspielen
quelle
Live-Beispiel: https://jsfiddle.net/de4Lt57z/
HTML:
CSS:
Erläuterung: Hier wird die Größe des Bilds nach Breite und Höhe des Bildes geändert. Das Zuschneiden erfolgt über die Clip-Eigenschaft.
Weitere Informationen zur Clip-Eigenschaft finden Sie unter: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
quelle
Platzieren Sie in der Zuschneideklasse die Bildgröße, die angezeigt werden soll:
Das HTML sieht folgendermaßen aus:
quelle
quelle
Sie können das img-Tag in ein div-Tag einfügen und beides tun, aber ich würde empfehlen, keine Bilder im Browser zu skalieren. Es macht die meiste Zeit einen miesen Job, weil Browser sehr vereinfachte Skalierungsalgorithmen haben. Es ist besser, zuerst in Photoshop oder ImageMagick zu skalieren und dann dem Kunden nett und hübsch zu dienen.
quelle
Ich habe ein serverseitiges Skript erstellt, dessen Größe geändert und ein Bild auf der Serverseite zugeschnitten wird, damit weniger Daten über das Internet gesendet werden.
Es ist ziemlich trivial, aber wenn jemand interessiert ist, kann ich den Code ausgraben und posten (asp.net)
quelle
Es gibt Dienste wie Filestack, die dies für Sie erledigen.
Sie nehmen Ihre Bild-URL und ermöglichen es Ihnen, die Größe mithilfe von URL-Parametern zu ändern. Es ist ziemlich einfach.
Ihr Bild würde so aussehen, wenn Sie die Größe auf 200 x 100 ändern, aber das Seitenverhältnis beibehalten
Die ganze URL sieht so aus
aber der wichtige Teil ist gerecht
quelle
Versuchen Sie es mit der
clip-path
Eigenschaft:Weitere Beispiele hier .
quelle
quelle
Wenn Sie Bootstrap verwenden, versuchen Sie es mit
{ background-size: cover; }
für die<div>
vielleicht die div eine Klasse sagen geben ,<div class="example" style=url('../your_image.jpeg');>
so wird esdiv.example{ background-size: cover}
quelle
Ich musste das kürzlich tun. Ich wollte einen Miniaturbild-Link zu einem NOAA-Diagramm erstellen. Da sich ihr Diagramm jederzeit ändern kann, wollte ich, dass sich mein Miniaturbild damit ändert. Das Diagramm weist jedoch ein Problem auf: Oben befindet sich ein riesiger weißer Rand. Wenn Sie ihn also nur skalieren, um das Miniaturbild zu erstellen, erhalten Sie im Dokument überflüssige Leerzeichen.
So habe ich es gelöst:
http://sealevel.info/example_css_scale_and_crop.html
Zuerst musste ich ein bisschen rechnen. Das Originalbild von NOAA ist 960 × 720 Pixel groß, aber die oberen siebzig Pixel sind ein überflüssiger weißer Randbereich. Ich brauchte ein 348 × 172-Miniaturbild ohne den zusätzlichen Randbereich oben. Das heißt, der gewünschte Teil des Originalbildes ist 720 - 70 = 650 Pixel hoch. Ich musste das auf 172 Pixel verkleinern, dh 172/650 = 26,5%. Das bedeutete, dass 26,5% von 70 = 19 Pixelzeilen oben im skalierten Bild gelöscht werden mussten.
Damit…
Stellen Sie die Höhe = 172 + 19 = 191 Pixel ein:
Höhe = 191
Stellen Sie den unteren Rand auf -19 Pixel ein (verkürzen Sie das Bild auf 172 Pixel):
Rand unten: -19px
Stellen Sie die obere Position auf -19 Pixel ein (verschieben Sie das Bild nach oben, sodass die oberen 19 Pixelzeilen überlaufen und anstelle der unteren ausgeblendet werden):
oben: -19px
Das resultierende HTML sieht folgendermaßen aus:
Wie Sie sehen können, habe ich das enthaltende <a> -Tag formatiert, aber Sie können stattdessen ein <div> formatieren.
Ein Artefakt dieses Ansatzes ist, dass beim Anzeigen der Ränder der obere Rand fehlt. Da ich sowieso border = 0 verwende, war das für mich kein Problem.
quelle
Sie können den Kodem Image Resize Service verwenden . Sie können die Größe jedes Bildes mit nur einem http-Aufruf ändern. Kann beiläufig im Browser oder in Ihrer Produktions-App verwendet werden.
quelle