web-dev-qa-db-fra.com

HTML - Bootstrap - Comment rogner la partie centrale d'une image

Je crée un site Web et je souhaite recadrer une image en une image carrée en fonction de l'orientation de l'image. Je ne suis pas vraiment familier avec CSS, donc je ne sais pas comment aborder ce problème.

Si c'est une image de paysage (800x500), alors je veux que l'image recadrée soit comme ceci (500x500):

Cropping 800x500 image

Si c'est un portrait (400x600) alors il devrait découper cette partie (400x400) de l'image:

Cropping 400x600 image

Comment dois-je m'y prendre pour y parvenir? De préférence, une méthode que je peux utiliser avec l'option "img-responsive" de Bootstrap afin de pouvoir redimensionner le cadrage si nécessaire.

Merci,

htmlcssimagetwitter-bootstrap-3crop
8
FljpFl0p

@ FljpFl0p corrige ça [jsfiddle] [1]

[1]: https://www.bootply.com/92024 et voici une autre réponse ici Comment rogner et centrer automatiquement une image . Tks!

Si vous voulez qu'il soit réactif et utilisez bootstrap 4. Essayez celui-ci:

CSS

.thumb-post img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}
6
Állan Fidelis Toledo

Vous ne savez pas vraiment si vous êtes assez limité à une approche CSS, mais une approche JavaScript aiderait à obtenir la dimension de l'image et à l'envelopper dans un div avec overflow:hidden.

$width = $(".box img").css('width');
$height = $(".box img").css('height');
$max = (($width < $height) ? $width : $height);

$(".box").css("width", $max);
$(".box").css("height", $max);
.box {
  margin: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <img src="https://placehold.it/300x200">
</div>

0
ajib

Ajoutez la classe img-responsive à la balise img, qui redimensionnera votre image et conservera le rapport largeur/hauteur. Si vous n'êtes pas satisfait des résultats, j'essaierai d'utiliser Javascript.

0
Jimmy