Je sais qu'il est impossible de modifier réellement une image avec CSS, c'est pourquoi je mets le recadrage entre guillemets.

Ce que j'aimerais faire, c'est prendre des images rectangulaires et utiliser CSS pour les faire apparaître carrées sans déformer l'image du tout.

J'aimerais essentiellement tourner ceci:

Dans ceci:

En supposant qu'ils ne doivent pas nécessairement figurer dans les balises IMG ...

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 }

EDIT: Si le div a besoin de créer un lien quelque part, ajustez simplement le HTML et les styles comme ceci:

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 }

Notez que cela pourrait également être modifié pour être réactif, par exemple% largeurs et hauteurs, etc.

Une solution CSS pure sans wrapper divou autre code inutile:

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

1. Placez votre image dans un div.
2. Donnez à votre div des dimensions carrées explicites.
3. Définissez la propriété de débordement CSS sur le div sur hidden ( overflow:hidden).
4. Mettez votre imagination à l'intérieur du div.
5. Profit.

Par exemple:

<div style="width:200px;height:200px;overflow:hidden">
    <img src="foo.png" />
</div>

Utilisation de la taille de fond: couverture - 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;
}  

Balisage:

<div class="image-container"></div>

En fait, je suis tombé sur ce même problème récemment et je me suis retrouvé avec une approche légèrement différente (je ne pouvais pas utiliser d'images de fond). Cela nécessite cependant un petit peu de jQuery pour déterminer l'orientation des images (je suis sûr que vous pouvez utiliser JS à la place).

J'ai écrit un article de blog à ce sujet si vous êtes intéressé par plus d'explications mais le code est assez simple:

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

});

Si l'image se trouve dans un conteneur avec une largeur réactive :

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

J'ai eu un problème similaire et je ne pouvais pas «faire de compromis» avec les images de fond. Je suis venu avec ça.

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

J'espère que cela t'aides!

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

Utilisez CSS: overflow:

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

Soit utiliser un div avec des dimensions carrées avec l'image à l'intérieur avec la classe .testimg:

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

.testimg {
    margin-left: -76px

}

ou un carré div avec un arrière-plan de l'image.

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

Voici quelques exemples: http://jsfiddle.net/QqCLC/1/

MISE À JOUR POUR LES CENTRES D'IMAGE

.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 fera exactement ce dont vous avez besoin.

Mais cela pourrait ne pas fonctionner sur IE / Edge. Suivez comme indiqué ci-dessous pour le réparer avec juste CSS pour fonctionner sur tous les navigateurs .

L'approche que j'ai adoptée a consisté à positionner l'image à l'intérieur du conteneur avec un absolu , puis à la placer au centre en utilisant la combinaison:

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

Une fois qu'il est au centre, je donne à l'image,

// 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%;

Cela donne à l'image l'effet de Object-fit: cover.

Voici une démonstration de la logique ci-dessus.

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

Cette logique fonctionne dans tous les navigateurs.

Image originale

Recadrée verticalement

Recadrée horizontalement