Comment recadrer et centrer automatiquement une image

Question

Étant donné une image arbitraire, je veux recadrer un carré 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 comme je ne connais pas la taille de l'image, je ne peux pas utiliser les marges définies.

Answer 1

La solution consiste à utiliser une image d'arrière-plan centrée dans un élément dont les dimensions correspondent à celles de l'image rognée.

---

Exemple de base

(voir en action)

Balisage

<div class="center-cropped" 
     style="background-image: url('path/to/image.jpg');">
</div>​

CSS

.center-cropped {
    width: 100px;  // change to desired width.
    height: 100px; // change to desired height.
    background-position: center center;
    background-repeat: no-repeat;
}​

---

Exemple avec img étiquette

Cette version conserve le img afin de ne pas perdre la possibilité de glisser ou de faire un clic droit pour enregistrer l'image. Credit to Parker Bennett pour l'astuce de l'opacité.

(voir en action)

Balisage

<div class="center-cropped" 
     style="background-image: url('path/to/image.jpg');">
    <img src="path/to/image.jpg" />
</div>

CSS

.center-cropped {
    width: 100px;  // change to desired width.
    height: 100px; // change to desired height.
    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;
}

Answer 2

Je cherchais une solution purement CSS utilisant img (pas à la manière d'une image d'arrière-plan).

J'ai trouvé cette brillante façon d'atteindre le but sur recadrer les vignettes 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;
}

Elle est similaire à la réponse de @Nathan Redblur, mais elle permet également de réaliser des portraits.

Ça marche comme un charme pour moi. La seule chose que vous devez savoir sur l'image est s'il s'agit d'un portrait ou d'un paysage, afin de définir l'indicateur d'image. .portrait donc j'ai dû utiliser un peu de Javascript pour cette partie.

Answer 3

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

object-fit: cover;

Answer 4

Exemple avec img mais sans background-image

Cette solution permet de conserver le img 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-image Il suffit de centrer et de recadrer avec css.

Le rapport d'aspect est maintenu, sauf pour les images très hautes. (voir le lien)

(voir 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%);
}

Answer 5

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

Cela 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 vers le violon