CSS Anzeige eines skalierten und zugeschnittenen Bildes

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>

css3HintergrundbildHintergrundgröße

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 HTMLcode 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…

1. Setze die Höhe = 172 + 19 = 191 Pixel:

   height = 191

2. Stellen Sie den unteren Rand auf -19 Pixel ein (um das Bild auf 172 Pixel zu verkürzen):

   margin-bottom: -19px

3. 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}