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 das Bild dann auf die gewünschte Größe zuschneiden.
Ich kann mit html img
-Eigenschaft die Größe ändern und ich kann mit background-image
..__ schneiden.
Wie kann ich beides tun?
Beispiel:
Dieses Bild:
Hat die Größe von 800x600
Pixeln und ich möchte ein Bild mit 200x100
Pixeln anzeigen
Mit img
kann ich das Bild 200x150px
ändern:
<img
style="width: 200px; height: 150px;"
src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">
Das gibt mir folgendes:
<img style="width: 200px; height: 150px;" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg">
Und mit background-image
kann ich das Bild 200x100
Pixel schneiden.
<div
style="background-image:
url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
width:200px;
height:100px;
background-position:center;"> </div>
Gibt mir:
<div style="background-image:url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg'); width:200px; height:100px; background-position:center;"> </div>
Wie kann ich beides tun?
Ändern Sie die Größe des Bildes und schneiden Sie es dann in der gewünschten Größe aus.
Sie können eine Kombination beider Methoden verwenden, z.
<div class="crop">
<img src="..." alt="...">
</div>
CSS:
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}
Sie können negative margin
verwenden, um das Bild im <div/>
zu verschieben.
Mit CSS3 ist es möglich, die Größe eines background-image
mit background-size
zu ändern und beide Ziele gleichzeitig zu erreichen.
Es gibt eine Reihe von Beispielen auf css3.info .
Anhand Ihres Beispiels implementiert , mit donald_duck_4.jpg . In diesem Fall ist background-size: cover;
genau das, was Sie wollen - es passt den background-image
an, um den gesamten Bereich des enthaltenen <div>
abzudecken, und schneidet den Überschuss ab (abhängig vom Verhältnis).
.with-bg-size {
background-image: url('http://img1.jurko.net/wall/paper/donald_duck_4.jpg');
width: 200px;
height: 100px;
background-position: center;
/* Make the background image cover the area of the <div>, and clip the excess */
background-size: cover;
}
<div class="with-bg-size">Donald Duck!</div>
Hast du versucht, das zu benutzen?
.centered-and-cropped { object-fit: cover }
Ich musste das Bild skalieren, zentrieren (sowohl vertikal als auch horizontal) und es dann zuschneiden.
Ich war froh, 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
und HTML
code aus diesem Beispiel:
CSS:
.centered-and-cropped { object-fit: cover }
HTML:
<h1>original</h1>
<img height="200" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
<h1>object-fit: cover</h1>
<img class="centered-and-cropped" width="200" height="200"
style="border-radius:50%" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/bear.jpg" alt="Bear">
.imgContainer {
overflow: hidden;
width: 200px;
height: 100px;
}
.imgContainer img {
width: 200px;
height: 120px;
}
<div class="imgContainer">
<img src="imageSrc" />
</div>
Das enthaltende div schneidet das Bild im Wesentlichen durch Ausblenden des Überlaufs.
img {
position: absolute;
clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
Danke sanchothefat.
Ich habe eine Verbesserung Ihrer Antwort. Da der Zuschnitt für jedes Bild sehr maßgeschneidert ist, sollten diese Definitionen im HTML-Format anstelle von CSS vorliegen.
<div style="overflow:hidden;">
<img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>
img {
position: absolute;
clip: rect(0px,60px,200px,0px);
}
Platzieren Sie in der Schnittklasse die Bildgröße, die Sie anzeigen möchten:
.crop {
width: 282px;
height: 282px;
overflow: hidden;
}
.crop span.img {
background-position: center;
background-size: cover;
height: 282px;
display: block;
}
Die HTML-Datei sieht folgendermaßen aus:
<div class="crop">
<span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>
<p class="crop"><a href="http://templatica.com" title="Css Templates">
<img src="img.jpg" alt="css template" /></a></p>
.crop {
float: left;
margin: .5em 10px .5em 0;
overflow: hidden; /* this is important */
position: relative; /* this is important too */
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop img {
position: absolute;
top: -20px;
left: -55px;
}
Live-Beispiel: https://jsfiddle.net/de4Lt57z/
HTML:
<div class="crop">
<img src="example.jpg" alt="..." />
</div>
CSS:
.crop img{
width:400px;
height:300px;
position: absolute;
clip: rect(0px,200px, 150px, 0px);
}
Erläuterung: Hier wird die Größe des Bildes nach Breite und Höhe des Bildes geändert. Das Zuschneiden erfolgt über die Clip-Eigenschaft.
Details zu den Clip-Eigenschaften finden Sie hier: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/
object-fit
kann Ihnen helfen, wenn Sie mit<img>
-Tag spielen
Mit dem folgenden Code wird Ihr Bild für Sie zugeschnitten. Sie können mit object-fit herumspielen.
img {
object-fit: cover;
width: 300px;
height: 337px;
}
Sie können das img-Tag in ein div-Tag einfügen und beides tun, aber ich würde die Skalierung von Bildern im Browser empfehlen. Die meiste Zeit macht es eine schlechte Sache, weil Browser über sehr einfache Skalierungsalgorithmen verfügen. Besser machen Sie Ihre Skalierung zuerst in Photoshop oder ImageMagick, bevor Sie sie dem Kunden gut machen.
Was ich getan habe, ist das Erstellen eines serverseitigen Skripts, das ein Bild auf der Serverseite skaliert und zuschneidet, sodass weniger Daten über das Interweb gesendet werden.
Es ist ziemlich trivial, aber wenn es jemanden interessiert, kann ich den Code herausfinden und posten (asp.net)
Es gibt Services wie Filestack, das dies für Sie tun wird.
Sie nehmen Ihre Image-URL und ermöglichen es Ihnen, die Größe mithilfe von URL-Parametern zu ändern. Es ist ziemlich einfach.
Ihr Bild würde nach der Größenänderung auf 200x100 so aussehen, das Seitenverhältnis jedoch beibehalten
Die gesamte URL sieht so aus
https://process.filestackapi.com/AhTgLagciQByzXpFGRI0Az/resize=width:200/crop=d:[0,25,200,100]/https://i.stack.imgur.com/wPh0S.jpg
aber der wichtige teil ist nur
resize=width:200/crop=d:[0,25,200,100]
Ich musste das kürzlich tun. Ich wollte einen Thumbnail-Link zu einer NOAA-Grafik erstellen. Da sich ihr Diagramm jederzeit ändern kann, wollte ich, dass sich mein Miniaturbild damit ändert. Es gibt jedoch ein Problem mit dem Diagramm: Es hat oben einen großen weißen Rand. Wenn Sie es also einfach skalieren, um das Miniaturbild zu erhalten, wird das Dokument mit einem überflüssigen Leerzeichen versehen.
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, 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, d. H. 172/650 = 26,5%. Das bedeutet, dass 26,5% von 70 = 19 Pixelzeilen oben im skalierten Bild gelöscht werden mussten.
So…
Setze die Höhe = 172 + 19 = 191 Pixel:
height = 191
Stellen Sie den unteren Rand auf -19 Pixel ein (um das Bild auf 172 Pixel zu verkürzen):
margin-bottom: -19px
Setzen Sie die obere Position auf -19 Pixel (Verschieben des Bildes nach oben, sodass die oberen 19 Pixelzeilen überlaufen und nicht die unteren, sondern die ausgeblendeten Zeilen sind):
top: -19px
Der resultierende HTML-Code sieht folgendermaßen aus:
<a href="…" style="display:inline-block;overflow:hidden">
<img width=348 height=191 alt=""
style="border:0;position:relative;margin-bottom:-19px;top:-19px"
src="…"></a>
Wie Sie sehen, habe ich mich entschieden, das enthaltende <a> -Tag zu formatieren, aber Sie könnten stattdessen auch ein <div> -Stil verwenden.
Ein Artefakt dieses Ansatzes ist, dass der obere Rand fehlt, wenn Sie die Grenzen anzeigen. Da ich trotzdem border = 0 verwende, war das kein Problem für mich.
<div class="crop">
<img src="image.jpg"/>
</div>
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 100%;
/*Here you can use margins for accurate positioning of cropped image*/
}
Wenn Sie Bootstrap verwenden, versuchen Sie es mit { background-size: cover;
}
für den <div>
. Geben Sie dem div vielleicht eine Klasse mit <div class="example" style=url('../your_image.jpeg');>
, damit es zu div.example{
background-size: cover}