CSS-Anzeige eines Bildes, dessen Größe geändert und zugeschnitten wurde

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- imgEigenschaft ändern und mit schneiden background-image.
Wie kann ich beides machen?

Beispiel:

Dieses Bild:

Hat die Größe 800x600Pixel und ich möchte wie ein Bild von 200x100Pixeln zeigen

Mit imgkann 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-imagekann ich die 200x100Bildpixel schneiden .

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

Gibt mir:

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

Wie kann ich beides machen?
Ändern Sie die Größe des Bildes und schneiden Sie es dann auf die gewünschte Größe?

Sie können eine Kombination beider Methoden verwenden, z.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

Sie können Negativ verwenden margin, um das Bild innerhalb des zu verschieben <div/>.

Mit CSS3 ist es möglich, die Größe eines background-imagewith zu ändern background-sizeund 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 passt background-imagezum gesamten Bereich des Behälters <div>und schneidet den Überschuss ab (abhängig vom Verhältnis).

.with-bg-size {
  background-image: url('https://i.stack.imgur.com/wPh0S.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>

css3 Hintergrundbild Hintergrundgröße

Haben Sie versucht, dies zu verwenden?

.centered-and-cropped { object-fit: cover }

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 CSSund HTMLCode aus diesem Beispiel:

.centered-and-cropped { object-fit: cover }

<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 mit schneidet das Bild im Wesentlichen zu, indem der Überlauf ausgeblendet wird.

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 das Zuschneiden für jedes Bild sehr maßgeschneidert ist, sollten diese Definitionen im HTML-Code anstelle von CSS erfolgen.

<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);
} 

object-fitkann Ihnen helfen, wenn Sie mit <img>Tag spielen

Der folgende Code schneidet Ihr Bild für Sie zu. Sie können mit der Objektanpassung herumspielen

img {
  object-fit: cover;
  width: 300px;
  height: 337px;
}

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 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/

Platzieren Sie in der Zuschneideklasse die Bildgröße, die angezeigt werden soll:

.crop {
    width: 282px;
    height: 282px;
    overflow: hidden;
}
.crop span.img {
    background-position: center;
    background-size: cover;
    height: 282px;
    display: block;
}

Das HTML 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;
}

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.

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)

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

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 gerecht

resize=width:200/crop=d:[0,25,200,100]

Versuchen Sie es mit der clip-pathEigenschaft:

Mit der Eigenschaft clip-path können Sie ein Element in eine Grundform oder in eine SVG-Quelle schneiden.

Hinweis: Die Clip-Pfad-Eigenschaft ersetzt die veraltete Clip-Eigenschaft.

img {
  width: 150px;
  clip-path: inset(30px 35px);
}

<img src="http://i.stack.imgur.com/wPh0S.jpg">

Weitere Beispiele hier .

<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 die <div>vielleicht die div eine Klasse sagen geben , <div class="example" style=url('../your_image.jpeg');>so wird es div.example{ background-size: cover}

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…

1. Stellen Sie die Höhe = 172 + 19 = 191 Pixel ein:

   Höhe = 191

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

   Rand unten: -19px

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

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

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.

• Laden Sie das Bild an einen beliebigen Ort hoch (S3, imgur usw.)
• Schließen Sie es an Ihre dedizierte API-URL an (über unser Dashboard).