web-dev-qa-db-fra.com

Comment "rogner" une image rectangulaire en un carré avec CSS?

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

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

Je voudrais fondamentalement tourner ceci:

enter image description here

Dans ceci:

enter image description here

htmlcssimagecrop
144
novicePrgrmr

En supposant qu'ils ne doivent pas obligatoirement être dans les tags 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 la div doit créer un lien quelque part, ajustez HTML et les styles comme suit:

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.

71
Michael

Une solution CSS pure sans wrapper div ou autre code inutile:

img {
  object-fit: cover;
  width:230px;
  height:230px;
}
355
Vision Hive
  1. Placez votre image dans un div.
  2. Donnez à votre div des dimensions carrées explicites.
  3. Définissez la propriété de dépassement de CSS sur la div sur masqué (overflow:hidden).
  4. Mettez votre imaginer à l'intérieur du div.
  5. Profit.

Par exemple:

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

Utilisation de background-size: 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;
}

Balisage:

<div class="image-container"></div>
31
Philip Nuzhnyy

En fait, j’ai rencontré ce même problème récemment et j’ai eu une approche légèrement différente (je n’étais pas capable d’utiliser des images de fond). Il faut cependant un peu de jQuery pour déterminer l’orientation des images (je suis sûr que vous pourriez utiliser JS simple à la place).

J'ai écrit un article de blog à ce sujet si vous souhaitez 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');        
      }
    });

});
14
FreddyBushBoy

Si l'image se trouve dans un conteneur avec une largeur sensible:

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

J'avais un problème similaire et je ne pouvais pas "compromettre" avec des images d'arrière-plan. 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/

2
Zach Botterman

Utilisez CSS: débordement:

.thumb {
   width:230px;
   height:230px;
   overflow:hidden
}
2
Diodeus - James MacFarlane

Utilisez soit un div de 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 fond 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/

MIS À JOUR SO 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>
1
tech292