Wie kann man mit CSS ein rechteckiges Bild in ein Quadrat „zuschneiden“?

170

Ich weiß, dass es unmöglich ist, ein Bild mit CSS tatsächlich zu ändern, weshalb ich Zuschneiden in Anführungszeichen setze.

Ich möchte rechteckige Bilder aufnehmen und sie mit CSS quadratisch erscheinen lassen, ohne das Bild zu verzerren.

Grundsätzlich möchte ich das umdrehen:

Geben Sie hier die Bildbeschreibung ein

Das mögen:

Geben Sie hier die Bildbeschreibung ein

novicePrgrmr
quelle
4
Sind diese Bilder Hintergrundbilder von Divs oder ist es für SEO wichtig, dass sie in <img> -Tags verbleiben?
Michael
2
Hast du schon was probiert? Dies ist entweder mit CSS3 background-positionoder dem alten Wrapper div mit overflow:hiddenund Bild mit relativer Positionierung ziemlich einfach .
Fabrício Matté
Sie könnten sicher Hintergrundbilder sein
novicePrgrmr
Siehe meine Antwort, ich denke, dies ist Ihre insgesamt beste Option. Positionierungselemente werden vermieden.
Michael

Antworten:

78

Vorausgesetzt, sie müssen nicht in IMG-Tags enthalten sein ...

HTML:

<div class="thumb1">
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1:hover { YOUR HOVER STYLES HERE }

BEARBEITEN: Wenn das div irgendwo verlinken muss, passen Sie einfach HTML und Stile wie folgt an:

HTML:

<div class="thumb1">
<a href="#">Link</a>
</div>

CSS:

.thumb1 { 
  background: url(blah.jpg) 50% 50% no-repeat; /* 50% 50% centers image in div */
  width: 250px;
  height: 250px;
}

.thumb1 a {
  display: block;
  width: 250px;
  height: 250px;
}

.thumb1 a:hover { YOUR HOVER STYLES HERE }

Beachten Sie, dass dies auch geändert werden kann, um zu reagieren, z. B.% Breiten und Höhen usw.

Michael
quelle
1
Dies ist eine gute Möglichkeit, mit einem einzigen Tag zu positionieren UND zuzuschneiden.
Rlemon
8
Beachten Sie auch, dass Mastbrowser beim Drucken Hintergrundbilder deaktivieren, damit sie nicht angezeigt werden.
j08691
Es kann damit umgehen: Schwebezustände auch. Wenn das div irgendwo verlinken muss, füge einfach ein Tag hinzu. Was den Druck betrifft, kann dies mit print.css behoben werden? Korrigieren Sie mich, wenn ich falsch liege?
Michael
Um ehrlich zu sein, würde der Druck in diesem Fall mit einem A-Tag zurückfallen, und in jedem Fall möchten Sie CSS-Stile hinzufügen, um dies für den Druck zu beheben.
Michael
1
Egal, ich habe es geändert height: 460px; width: 100%;und es funktioniert wie ein Zauber
NovicePrgrmr
417

Eine reine CSS-Lösung ohne Wrapper divoder anderen nutzlosen Code:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}
Vision Hive
quelle
12
Beachten Sie, dass dies unter IE und Edge atm leider nicht funktioniert. Siehe hier für weitere Details dazu: stackoverflow.com/a/37792830/1398056
baoutch
2
Was ist, wir wissen nicht, wie hoch wir es mit der automatischen Breite quadratisch machen wollen
Aravind Reddy
3
Ab Juni 2018 scheint nur IE11 (2,71%) keine Objektanpassung zu unterstützen, was für mich gut genug ist.
Ray
1
2019 ist die Unterstützung jetzt ziemlich gut. Nur noch 2,3% verwenden IE 11. Diese Lösung ist so einfach, dass ich sie nur verwenden kann, da die anderen so schmerzhaft sind, dass ich Stunden damit verschwendet habe, sie mit dem Backend-Code zum Laufen zu bringen.
Paul Morris
3
Es ist Zeit, den IE zu vergessen
iji
55
  1. Platziere dein Bild in einem Div.
  2. Geben Sie Ihrem div explizite quadratische Dimensionen an.
  3. Setzen Sie die CSS-Überlaufeigenschaft für div auf hidden ( overflow:hidden).
  4. Setzen Sie Ihre Vorstellung in die div.
  5. Profitieren.

Beispielsweise:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>
j08691
quelle
5
Es muss sichergestellt werden, dass die Position des Bildes zentriert oder zumindest gespielt wird. Das OP-Beispiel sieht zentriert aus (obwohl ich dies nur erwähne und nicht erwarte, dass Sie Ihre Antwort überhaupt ändern: P).
Rlemon
1
@rlemon - dann könnte das OP die Position des div auf relativ und die Position des Bildes auf absolut setzen und die oberen und linken Attribute anpassen.
j08691
6
Ich erwähne es nur, bevor jemand alles ist; "Aber jetzt ist alles links ausgerichtet!" -: P
rlemon
1
Ja, es wäre entscheidend, dass es zentriert ist
NovicePrgrmr
32

Hintergrundgröße verwenden: cover - http://codepen.io/anon/pen/RNyKzB

CSS:

.image-container {
  background-image: url('http://i.stack.imgur.com/GA6bB.png');
  background-size:cover;
  background-repeat:no-repeat;
  width:250px;
  height:250px;
}  

Markup:

<div class="image-container"></div>
Philip Nuzhnyy
quelle
1
Die Kombination der Zentrierungsfähigkeit der Antwort von mtronics funktioniert auch unter IE9 gut.
Faker
14

Ich bin kürzlich tatsächlich auf dasselbe Problem gestoßen und habe einen etwas anderen Ansatz gewählt (ich konnte keine Hintergrundbilder verwenden). Es erfordert jedoch ein wenig jQuery, um die Ausrichtung der Bilder zu bestimmen (ich bin sicher, Sie könnten stattdessen stattdessen einfaches JS verwenden).

Ich habe einen Blog-Beitrag darüber geschrieben, wenn Sie an weiteren Erklärungen interessiert sind, der Code jedoch ziemlich einfach ist:

HTML:

<ul class="cropped-images">
  <li><img src="http://fredparke.com/sites/default/files/cat-portrait.jpg" /></li>
  <li><img src="http://fredparke.com/sites/default/files/cat-landscape.jpg" /></li>
</ul>

CSS:

li {
  width: 150px; // Or whatever you want.
  height: 150px; // Or whatever you want.
  overflow: hidden;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
li img {
  max-width: 100%;
  height: auto;
  width: auto;
}
li img.landscape {
  max-width: none;
  max-height: 100%;
}

jQuery:

$( document ).ready(function() {

    $('.cropped-images img').each(function() {
      if ($(this).width() > $(this).height()) {
        $(this).addClass('landscape');        
      }
    });

});
FreddyBushBoy
quelle
Ich denke, dies ist der CSS-Hintergrundalternative überlegen, da die Bilder Inhalt und nicht "Stil" sind und daher auf der HTML-Ebene beibehalten werden sollten. Wenn Sie sie auch im CSS anstelle des HTML-Codes haben, wirkt sich dies auf die SEO Ihrer Webseite aus. Vielen Dank!
Jose Florido
Eine gute Idee, dies zu verbessern, ist das Hinzufügen $(this).load(function(){...innerhalb jeder Schleife, sodass jQuery etwas wartet, bis das Bild geladen ist und echte Bildabmessungen erhält.
Jose Florido
14

Wenn sich das Bild in einem Container mit einer Antwort befindet Breite befindet:

HTML

<div class="img-container">
  <img src="" alt="">
</div>

CSS

.img-container {
  position: relative;

  &::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
JKL
quelle
Das ist wirklich schön. Es ist auch unglaublich flexibel, denn sobald das Bild quadratisch ist, können Sie es einkreisen lassen und andere coole Dinge tun.
Rocky Kev
3

Ich hatte ein ähnliches Problem und konnte mit Hintergrundbildern keine "Kompromisse eingehen". Ich habe mir das ausgedacht.

<div class="container">
    <img src="http://lorempixel.com/800x600/nature">
</div>

.container {
    position: relative;
    width: 25%; /* whatever width you want. I was implementing this in a 4 tile grid pattern. I used javascript to set height equal to width */
    border: 2px solid #fff; /* just to separate the images */
    overflow: hidden; /* "crop" the image */
    background: #000; /* incase the image is wider than tall/taller than wide */
}

.container img {
    position: absolute;
    display: block;
    height: 100%; /* all images at least fill the height */
    top: 50%; /* top, left, transform trick to vertically and horizontally center image */
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

//assuming you're using jQuery
var h = $('.container').outerWidth();
$('.container').css({height: h + 'px'});

Hoffe das hilft!

Beispiel: https://jsfiddle.net/cfbuwxmr/1/

Zach Botterman
quelle
2

Verwenden Sie CSS: Überlauf:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}
Diodeus - James MacFarlane
quelle
3
Diese Dimensionen sind nicht sehr quadratisch. :-)
Isherwood
2
Nein, du hast recht. Duh. Ich habe gerade die vorhandene Höhe von der Bildgröße des OP angehoben, wie ein ausgebrannter Roboter am Freitagnachmittag.
Diodeus - James MacFarlane
Heh. Ich bin da bei dir. :-)
Isherwood
1

Verwenden Sie entweder ein Div mit quadratischen Abmessungen und dem Bild mit der Klasse .testimg:

.test {
width: 307px;
height: 307px;
overflow:hidden
}

.testimg {
    margin-left: -76px

}

oder ein quadratisches Div mit einem Hintergrund des Bildes.

.test2 {
width: 307px;
height: 307px;
    background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}

Hier einige Beispiele: http://jsfiddle.net/QqCLC/1/

AKTUALISIERT SO DIE BILDZENTREN

.test {
  width: 307px;
  height: 307px;
  overflow: hidden
}

.testimg {
  margin-left: -76px
}

.test2 {
  width: 307px;
  height: 307px;
  background: url(http://i.stack.imgur.com/GA6bB.png) 50% 50%
}
<div class="test"><img src="http://i.stack.imgur.com/GA6bB.png" width="460" height="307" class="testimg" /></div>

<div class="test2"></div>

tech292
quelle
0

object-fit: cover wird genau das tun, was Sie brauchen.

Unter IE / Edge funktioniert dies möglicherweise nicht. Befolgen Sie die nachstehenden Anweisungen, um das Problem mit nur CSS zu beheben und mit allen Browsern zu arbeiten .

Der Ansatz, den ich gewählt habe, bestand darin, das Bild mit Absolut im Container zu positionieren und es dann mit der Kombination genau in der Mitte zu platzieren :

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Sobald es in der Mitte ist, gebe ich dem Bild,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Dadurch erhält das Bild den Effekt von Object-Fit: Cover.


Hier ist eine Demonstration der obigen Logik.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Diese Logik funktioniert in allen Browsern.


Original Bild
Original Bild

Vertikal beschnitten
Vertikal beschnittenes Bild

Horizontal beschnitten
Horizontal zugeschnittenes Bild


Furqan Rahamath
quelle