CSS-Anzeige ein Bild in der Größe verändert und Zugeschnitten

Question

Ich will zeigen, ein Bild von einer URL mit einer bestimmten Breite und Höhe, auch wenn Sie eine andere Größe-Verhältnis.So möchte ich die Größenänderung (die Aufrechterhaltung der ratio) und schneiden Sie dann das Bild auf die Größe ich wollen.

Ich kann die Größe mit html img Eigentum und ich kann mit Schnitt background-image.
Wie kann ich beides tun?

Beispiel:

Diese Bild:

Hat die Größe 800x600 Pixel und ich möchte zeigen, wie ein Bild von 200x100 Pixel

Mit img Kann ich die Größe des Bildes 200x150px:

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

Das gibt mir das:

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

Und mit background-image Ich kann schneiden Sie das Bild 200x100 Pixel.

<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 tun?
Ändern Sie die Bildgröße, und dann schneiden Sie die Größe ich wollen?

Answer 1

Sie können eine Kombination beider Methoden zB verwendet werden.

    .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 die negativen margin verwenden Sie das Bild innerhalb des <div/> zu bewegen.

Answer 2

Mit CSS3 ist es möglich, die Größe eines background-image mit zu ändern background-size , auf einmal beiden Ziele zu erfüllen.

Es gibt ein paar Beispiele auf css3.info .

Implementiert basierend auf Ihrem Beispiel , mit donald_duck_4.jpg . In diesem Fall ist background-size: cover; genau das, was Sie wollen -. Den background-image passen die gesamte Fläche des umschließenden <div> und streift die überschüssige (je nach Verhältnis) zu decken

.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 background-image Hintergrund-size

Answer 3

Haben Sie versucht, diese zu benutzen?

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

Ich brauchte Bild, um die Größe, in der Mitte (vertikal und horizontal) und als Ernte es.

Ich war glücklich, zu finden, dass es in einer einzigen CSS-line getan werden könnte. Überprüfen Sie das Beispiel hier: http://codepen.io/chrisnager/pen/azWWgr/ ? Editoren = 110

---

Hier ist die CSS und 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">

Answer 4

.imgContainer {
  overflow: hidden;
  width: 200px;
  height: 100px;
}
.imgContainer img {
  width: 200px;
  height: 120px;
}

<div class="imgContainer">
  <img src="imageSrc" />
</div>

Das enthält div mit im Wesentlichen das Bild beschneiden, indem Sie den Überlauf versteckt.

Answer 5

img {
  position: absolute;
  clip: rect(0px, 140px, 140px, 0px);
}

<img src="w3css.gif" width="100" height="140" />

Answer 6

Danke sanchothefat.

Ich habe eine Verbesserung für Ihre Antwort. Als Ernte sehr für jedes Bild zugeschnitten ist, sollten diese Definitionen anstelle von CSS im HTML sein.

<div style="overflow:hidden;">
   <img src="img.jpg" alt="" style="margin:-30% 0px -10% 0px;" />
</div>

Answer 7

  

object-fit kann Ihnen helfen, wenn Sie mit <img> Tag gerade spielen

Der Code unten wird das Bild für Sie beschneiden. Sie können mit Objekt-fit spielen, um

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

Answer 8

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
} 

Answer 9

In der Ernte Klasse, legen Sie die Bildgröße, die Sie angezeigt werden sollen:

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

Die HTML wird wie folgt aussehen:

<div class="crop">
    <span class="img" style="background-image:url('http://url.to.image/image.jpg');"></span>
</div>

Answer 10

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

Answer 11

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

Erklärung: Hier Bild wird durch die Breite und Höhe Wert des Bildes angepasst. Und Ernte wird von Clipeigenschaften gemacht.

Weitere Informationen über Clip-Eigenschaft folgen: http://tympanus.net/codrops/2013/ 16.01 / Verständnis-the-CSS-clip-Eigenschaft /

Answer 12

Sie können den img-Tag in einem div-Tag legen und beide tun, aber ich würde empfehlen, gegen die Bilder im Browser skalieren. Es macht einen lausigen Job die meiste Zeit, da Browser sehr simpel Skalieralgorithmen haben. Besser Ihre Skalierung in Photoshop oder ImageMagick zuerst zu tun, dann ist es an den Client schön dienen und hübsch.

Answer 13

Was ich getan habe, ist ein Server-seitiges Script zu erstellen, die ein Bild auf dem Server Ende wird die Größe und zuschneiden, um es weniger Daten über das interweb senden werden.

Es ist ziemlich trivial, aber wenn jemand interessiert ist, kann ich graben und buchen Sie den Code (asp.net)

Answer 14

Es gibt Dienste wie Dateistapel, die dies für Sie tun.

Sie nehmen Ihre Bild-URL und lassen Sie es mit URL-Parameter ändern. Es ist ziemlich einfach.

Ihr Bild wie dies nach dem Ändern der Größe auf 200x100 aussehen würde, aber das Seitenverhältnis zu halten

Die ganze URL sieht wie folgt 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]

Answer 15

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

Answer 16

Wenn Sie Bootstrap verwenden, versuchen { background-size: cover; } mit dem <div> vielleicht den div eine Klasse geben sagen <div class="example" style=url('../your_image.jpeg');> so wird es div.example{ background-size: cover}

Answer 17

Ich musste dies vor kurzem.Ich wollte ein thumbnail-link zu einem von der NOAA Diagramm.Seit Ihr Diagramm könnte sich jederzeit ändern, ich wollte mein thumbnail zu ändern.Aber es gibt ein problem mit Ihren Diagramm:es hat einen riesigen weißen Rand an der Spitze, so dass, wenn Sie nur skalieren, um die Miniaturansicht, die Sie am Ende mit überflüssigen Leerzeichen im Dokument.

Hier ist, wie ich es gelöst:

http://sealevel.info/example_css_scale_and_crop.html

Zuerst musste ich ein wenig Arithmetik.Das original-Bild von NOAA ist 960 × 720 Pixel, aber die top-siebzig Pixel sind überflüssig white border area.Ich brauchte ein 348 × 172 thumbnail, ohne zusätzliche Grenzgebiet an der Spitze.Das bedeutet, dass der gewünschte Teil des ursprünglichen Bildes ist 720 - 70 = 650 Pixel hoch.Ich brauchte, um zu skalieren, dass bis zu 172 Pixel, D. H., 172 / 650 = 26.5%.Das bedeutete, 26.5% von 70 = 19 Zeilen des Pixel benötigt werden, gelöscht, aus der die Spitze des skalierten Bildes.

So...

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

   Höhe=191

2. Legen Sie den unteren Rand, um -19 Pixel (Verkürzung der Bild 172 Pixel (Höhe):

   margin-bottom:-19px

3. Legen Sie die top-position zu -19 Pixel (verschieben das Bild nach oben, so dass der top-19-pixel-Zeilen-overflow - & ausgeblendet werden, anstatt von unten):

   top:-19px

Der resultierende HTML-Code sieht wie folgt 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 mich entschieden, um Stil der mit <a> tag -, aber Sie konnte Stil <div>statt.

Ein Artefakt dieses Ansatzes ist, dass, wenn Sie zeigen die Grenzen, den oberen Rand fehlt.Da ich border=0 jedenfalls, das war kein Problem für mich.