web-dev-qa-db-fra.com

Forcer une image à s’adapter et conserver le rapport de format

Je souhaite qu'une image remplisse à 100% la largeur de son conteneur, et qu'une propriété max-heigth lui soit affectée, tout en conservant les proportions, mais en permettant de perdre une partie de l'image.

img {
   max-height:200px;
   width:100%;
}

Je sais qu'une chose similaire peut être faite avec la propriété background-size mais je veux en faire une balise <img> en ligne.

Toute idée de comment pourrais-je atteindre cela en utilisant CSS? ou javascript?

htmlcsscss3
9
Sebastian Hernandez

Vous pouvez essayer CSS3 object-fit et voir la prise en charge du navigateur tables.

CSS3 object-fit/object-position Méthode permettant de spécifier comment un objet (image ou vidéo) doit tenir dans sa boîte. les options d’ajustement d’objet incluent "contenir" (ajustement en fonction du format), "remplissage" (étire un objet à remplir) et "couverture" (zone de débordement mais conserve le rapport), la position de l’objet permettant à l’objet de se repositionner comme l'image fait.

JSFIDDLE DEMO

.container {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}
<div class="container">
  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">
</div>

Informations connexes:

38
Stickers

Vous pouvez y parvenir en utilisant les propriétés css flex. Veuillez consulter le code ci-dessous

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>

0
Sandeep K Nair