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:

Das mögen:

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.

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

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

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>

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>

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

});

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

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/

Verwenden Sie CSS: Überlauf:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}

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>

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

Vertikal beschnitten

Horizontal beschnitten