web-dev-qa-db-fra.com

Changer les tailles d'image proportionnellement en utilisant CSS?

Depuis quelques jours, j'essaie de configurer ma galerie de vignettes pour que toutes les images apparaissent à la même hauteur et à la même largeur. Cependant, quand je change le code CSS en,

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

Je reçois des images qui ont toutes la même taille, mais le rapport de format est étiré, ce qui ruine les images. n'y a-t-il pas moyen de redimensionner le conteneur d'image et non l'image à la place? me permettant de garder le rapport d'aspect. mais redimensionner l'image encore. (Cela ne me dérange pas si je coupe une partie de l'image.)

Merci d'avance!

htmlcssgallerylightbox
91
Beaniie

c’est un problème connu du redimensionnement CSS, à moins que toutes les images aient la même proportion, vous n’avez aucun moyen de le faire via CSS.

La meilleure approche serait d’avoir un conteneur et de redimensionner l’une des dimensions (toujours les mêmes) des images. Dans mon exemple, j'ai redimensionné la largeur.

Si le conteneur a une dimension spécifiée (dans mon exemple, la largeur), lorsque vous indiquez à l'image d'avoir la largeur à 100%, la largeur totale du conteneur lui sera attribuée. Le auto à la hauteur donnera à l'image une hauteur proportionnelle à la nouvelle largeur.

Ex:

HTML:

<div class="container">
<img src="something.png" />
</div>

<div class="container">
<img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* resize images */
.container img {
    width: 100%;
    height: auto;
}
160
jackJoe

Vous devez fixer un côté (par exemple la hauteur) et régler l’autre sur auto.

Par exemple

 height: 120px;
 width: auto;

Cela aurait pour effet d’échelonner l’image sur un seul côté. Si vous trouvez un rognage acceptable, vous pouvez simplement définir

overflow: hidden;

à l'élément parent, ce qui supprime tout ce qui pourrait autrement dépasser sa taille.

36
Nick Andriopoulos

Vous pouvez utiliser la propriété object-fit css3, par exemple

<!doctype html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    .holder {
      display: inline;
    }
    .holder img {
      max-height: 200px;
      max-width: 200px;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class='holder'>
    <img src='meld.png'>
  </div>
  <div class='holder'>
    <img src='twiddla.png'>
  </div>
  <div class='holder'>
    <img src='meld.png'>
  </div>
</body>

</html>

Ce n'est pas exactement votre réponse, cependant, car cela n'allonge pas le conteneur, mais se comporte comme la galerie et vous pouvez continuer à styler la img elle-même.

Un autre inconvénient de cette solution est toujours le support médiocre de la propriété css3. Plus de détails sont disponibles ici: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/ . La solution jQuery peut également être trouvée ici.

21
dmitry_romanov

Pour rendre les images ajustables/flexibles, vous pouvez utiliser ceci:

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
8
Stanislav

Mettez-le en arrière-plan sur votre support, par exemple.

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
&nbsp;
</div>

Cela permettra de centrer votre image dans un div 120x120 coupant tout excès d’image.

5
DickieBoy

si vous connaissez le rapport hauteur/largeur, vous pouvez utiliser padding-bottom with percent pour régler la hauteur en fonction de la différence.

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>
0
reco