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

332

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:

Geben Sie hier die Bildbeschreibung ein


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?

InfoStatus
quelle

Antworten:

473

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

Roborourke
quelle
9
Beachten Sie, dass Sie, wenn Sie Position: relativ für das enthaltene Bild festlegen, Position: relativ für das enthaltene Div festlegen müssen. Wenn Sie dies nicht tun, habe ich festgestellt, dass der IE das Bild nicht wirklich ausschneidet.
Frank Schwieterman
Entfernen Sie auch Höhe aus .crop img Klasse
Waqar Alamgir
@ waqar-alamgir Es würde nicht funktionieren, wenn Sie die Höhenangabe entfernen würden
roborourke
6
Beachten Sie auch, dass der Benutzer das Bild noch herunterladen muss, wenn er CSS zum Zuschneiden eines Bildes verwendet. Es ist möglicherweise besser, PHP und GD oder eine andere Bildbearbeitungsbibliothek zu verwenden, um die Größe des Bildes zu ändern und es zuzuschneiden, bevor Sie es an den Benutzer senden. Es hängt alles davon ab, was Sie wollen, den Server oder die Bandbreite des Benutzers zu laden.
J-Rou
15
Nur ein Hinweis für andere: Höhe und Breite des Zuschnitts definieren, wo der unterste und der rechteste Teil des Bildes geschnitten werden sollen. .crop img Höhe und Breite skalieren das Bild. .crop img Rand wird das Bild schwenken
Frederik
138

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>

Joel Purra
quelle
1
Tolle Lösung, aber eine Einschränkung ist, dass es nicht mit IE <9 kompatibel ist (wenn das für irgendjemanden mehr wichtig ist). Außerdem wollte ich erwähnen, dass das Bild skaliert, aber nicht zugeschnitten wird, wenn Sie das Cover durch ein Contain für die Hintergrundgröße ersetzen.
Devnate
4
<img />Schauen Sie sich für Tags die object-fit: coverzugehörigen Werte aus der Spezifikation für CSS- Bildwerte und das Modul für ersetzte Inhalte der Stufe 3 an .
Joel Purra
110

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

Anatolii Stepaniuk
quelle
2
Vielen Dank, ich denke, dies ist der einfachste und universellste Weg - aber es scheint nicht mit IE zu funktionieren: / Die Dokumente finden Sie hier: developer.mozilla.org/de/docs/Web/CSS/object-fit
Mozzbozz
2
CSS3 objekt fit wird nicht von IE11 oder EDGE (14) unterstützt caniuse.com/#feat=object-fit
Augen Wunder ,
1
@ eye-Wonder, dass es in Edge 16 unterstützt wird und bald herauskommt. Wenn es nicht kritisch und sparsam verwendet wird, könnte es heute verwendet werden
Ray Foss
In CSS3 können wir entweder img + object-fit oder div + background-image ausprobieren. Bisher kann meiner Erfahrung nach das Hintergrundbild verwendet werden, um mehr Bedingungen zu erfüllen.
Eric
1
Ab sofort wird dies auch von Edge unterstützt (weiß aber nicht seit wann).
Gerald Schneider
20
.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.

Kelly Anderson
quelle
13
img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}
<img src="w3css.gif" width="100" height="140" />
Rohit Chaudhary
quelle
8

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>
Pedro Reis
quelle
6
img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 
151291
quelle
6

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;
}
Hidayt Rahman
quelle
Es war mein Tag - ich konnte dies leicht an eine Folie in meiner Slick-Slider-Karussell-Implementierung anhängen - einfache IMG
-Objektlösung
Das ist der Vorteil von CSS :)
Hidayt Rahman
5

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/

Md. Rafee
quelle
4

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>
Deivide
quelle
3
<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;
}
Sergey Chechaev
quelle
1

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.

Dave Markle
quelle
1

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)

rauben
quelle
CGI ist wahrscheinlich die portabelste Methode (und bandbreiteneffizient), es sei denn, das OP beabsichtigt, dem Benutzer die Möglichkeit zu geben, die Größe und das Zuschneiden über Javascript selbst zu ändern.
Strager
1

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]

Geben Sie hier die Bildbeschreibung ein

Ferrantim
quelle
netter Plug vielleicht - aber genauso - ein großartiger Service (nein, ich werde nicht dafür bezahlt, das zu sagen ;-)) - Ich habe mich buchstäblich gerade angemeldet und es ist ziemlich cool
Jonathan Lyon
1

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 .

Emerica
quelle
0
<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*/
}
Krone
quelle
0

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}

stacksonstacksonstacks
quelle
0

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.

Dave Burton
quelle
0

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).
Thellimist
quelle