Étant donné toute image arbitraire, je souhaite recadrer un carré à partir du centre de l'image et l'afficher dans un carré donné.

Cette question est similaire à celle-ci: CSS affiche une image redimensionnée et recadrée , mais je ne connais pas la taille de l'image, je ne peux donc pas utiliser les marges définies.

Une solution consiste à utiliser une image de fond centrée dans un élément dimensionné aux dimensions rognées.

Exemple de base

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
</div>

Exemple avec imgtag

Cette version conserve la imgbalise afin que nous ne perdions pas la possibilité de faire glisser ou de cliquer avec le bouton droit pour enregistrer l'image. Nous remercions Parker Bennett pour le tour d'opacité.

.center-cropped {
  width: 100px;
  height: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Set the image to fill its parent and make transparent */
.center-cropped img {
  min-height: 100%;
  min-width: 100%;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  /* IE 5-7 */
  filter: alpha(opacity=0);
  /* modern browsers */
  opacity: 0;
}

<div class="center-cropped" 
     style="background-image: url('http://placehold.it/200x200');">
  <img src="http://placehold.it/200x200" />
</div>

object-fit/-position

Voir les navigateurs pris en charge .

La spécification Images CSS3 définit les propriétés object-fitet object-positionqui, ensemble, permettent un meilleur contrôle sur l'échelle et la position du contenu d'image d'un imgélément. Avec ceux-ci, il sera possible d'obtenir l'effet souhaité:

.center-cropped {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  height: 100px;
  width: 100px;
}

<img class="center-cropped" src="http://placehold.it/200x200" />

Je cherchais une solution CSS pure utilisant des imgbalises (pas la manière de l'image de fond).

J'ai trouvé ce moyen génial d'atteindre l'objectif sur les vignettes de recadrage avec css :

.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
  width: 100%;
  height: auto;
}

C'est similaire à la réponse de @Nathan Redblur, mais cela permet également des images de portrait.

Fonctionne comme un charme pour moi. La seule chose que vous devez savoir sur l'image est de savoir si elle est portrait ou paysage afin de définir la .portraitclasse, j'ai donc dû utiliser un peu de Javascript pour cette partie.

Essayez ceci: définissez les dimensions de votre image et utilisez cette ligne dans votre CSS:

object-fit: cover;

Exemple avec imgtag mais sansbackground-image

Cette solution conserve la imgbalise afin de ne pas perdre la possibilité de faire glisser ou de cliquer avec le bouton droit de la souris pour enregistrer l'image, mais sans background-imagesimplement centrer et recadrer avec css.

Maintenez le rapport hauteur / largeur correct sauf dans les images très hautes. (vérifiez le lien)

(vue en action)

Balisage

<div class="center-cropped">
    <img src="http://placehold.it/200x150" alt="" />
</div>

CSS

div.center-cropped {
  width: 100px;
  height: 100px;
  overflow:hidden;
}
div.center-cropped img {
  height: 100%;
  min-width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}

J'ai créé une directive angularjs en utilisant les réponses de @ Russ et @ Alex

Pourrait être intéressant en 2014 et au-delà: P

html

<div ng-app="croppy">
  <cropped-image src="http://placehold.it/200x200" width="100" height="100"></cropped-image>
</div>

js

angular.module('croppy', [])
  .directive('croppedImage', function () {
      return {
          restrict: "E",
          replace: true,
          template: "<div class='center-cropped'></div>",
          link: function(scope, element, attrs) {
              var width = attrs.width;
              var height = attrs.height;
              element.css('width', width + "px");
              element.css('height', height + "px");
              element.css('backgroundPosition', 'center center');
              element.css('backgroundRepeat', 'no-repeat');
              element.css('backgroundImage', "url('" + attrs.src + "')");
          }
      }
  });

lien violon

Essaye ça:

#yourElementId
{
    background: url(yourImageLocation.jpg) no-repeat center center;
    width: 100px;
    height: 100px;
}

Gardez à l'esprit que widthet heightne fonctionnera que si votre élément DOM a une disposition (un élément affiché en bloc, comme un divou un img). Si ce n'est pas le cas (un span, par exemple), ajoutez display: block;aux règles CSS. Si vous n'avez pas accès aux fichiers CSS, déposez les styles en ligne dans l'élément.

Il existe une autre façon de recadrer l'image centrée:

.thumbnail{position: relative; overflow: hidden; width: 320px; height: 640px;}
.thumbnail img{
    position: absolute; top: -999px; bottom: -999px; left: -999px; right: -999px;
    width: auto !important; height: 100% !important; margin: auto;
}
.thumbnail img.vertical{width: 100% !important; height: auto !important;}

La seule chose dont vous aurez besoin est d'ajouter la classe "verticale" aux images verticales, vous pouvez le faire avec ce code:

jQuery(function($) {
    $('img').one('load', function () {
        var $img = $(this);
        var tempImage1 = new Image();
        tempImage1.src = $img.attr('src');
        tempImage1.onload = function() {
            var ratio = tempImage1.width / tempImage1.height;
            if(!isNaN(ratio) && ratio < 1) $img.addClass('vertical');
        }
    }).each(function () {
        if (this.complete) $(this).load();
    });
});

Remarque: "! Important" est utilisé pour remplacer les attributs largeur / hauteur possibles sur la balise img.