it-swarm.com.de

CSS Anzeige eines skalierten und zugeschnittenen Bildes

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:

enter image description here


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;">&nbsp;</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;">&nbsp;</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.

297
InfoStatus

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.

436
roborourke

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

128
Joel Purra

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

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

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

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

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/

2
Md. Rafee

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;
}
2
Hidayt Rahman

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.

1
Dave Markle

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)

1
Rob

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]

 enter image description here

1
ferrantim

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.

0
Dave Burton
<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*/
}
0
Krone

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}

0
rshah