107

J'essaie depuis quelques jours maintenant de configurer ma galerie de vignettes pour que toutes les images aient la même hauteur et la même largeur. Cependant, lorsque je change le code Css en,

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

J'obtiens des images qui sont toutes de la même taille mais le rapport hauteur / largeur est étiré, ce qui ruine les images. n'y a-t-il pas un moyen de redimensionner le conteneur d'image et non l'image à la place? me permettant de garder le rapport hauteur / largeur. mais redimensionnez toujours l'image. (Cela ne me dérange pas si je coupe une partie de l'image.)

Merci d'avance!

html css gallery lightbox Bonnet
la source

184

c'est un problème connu avec le 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 la même) 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 dites à l'image d'avoir la largeur à 100%, cela en fera toute la largeur du conteneur. 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;
}

jackJoe
la source

42

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

Par exemple

 height: 120px;
 width: auto;

Cela redimensionnerait l'image en fonction d'un seul côté. Si vous trouvez le recadrage de l'image acceptable, vous pouvez simplement définir

overflow: hidden;

à l'élément parent, qui rognerait tout ce qui dépasserait autrement sa taille.

Nick Andriopoulos
la source

J'ai essayé cela, mais cela me donne toujours des images qui sont toutes de tailles et de formes différentes Je veux que la galerie soit uniforme comme ça, [] [] [] [] pas comme [] [] [] [] []

Bonnet

2

utilisez une combinaison des deux éléments ci-dessus: définissez la hauteur sur un nombre (avec largeur automatique pour garder l'échelle) et limitez le parent à une largeur spécifique avec overflow: hiddenpour recadrer l'excédent

Nick Andriopoulos

25

Vous pouvez utiliser la object-fitpropriété css3, quelque chose comme

<!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>

Développer l'extrait

Ce n'est pas exactement votre réponse, cependant, car cela n'étire pas le conteneur, mais il se comporte comme la galerie et vous pouvez continuer à le styliser img.

Un autre inconvénient de cette solution est toujours une mauvaise prise en charge 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 y être trouvée.

dmitry_romanov
la source

Merci, belle solution. :)

Bibhu

C'est un peu étrange de répondre avec une propriété qui n'est prise en charge que dans l'opéra atm?! caniuse.com/object-fit

Simon Dragsbæk

4

Je vois votre point de vue, @Simon, merci. J'ai mentionné que je n'ai aucune idée si la propriété sera prise en charge partout, mais même si ce n'est pas le cas , nous pouvons l'utiliser comme point de départ pour google pour des alternatives qui la remplacent. Une autre raison de publier est que la réponse resterait un certain temps pendant que les navigateurs s'améliorent chaque jour, j'ai donc répondu en ciblant également ce futur proche .

dmitry_romanov

1

En venant sur cette page plusieurs années plus tard, j'étais heureux de trouver cette réponse «future»!

petzi

8

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

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

Stanislav
la source

5

Mettez-le comme 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 va centrer votre image dans un div 120x120 coupant tout excès de l'image

DickieBoy
la source

2

Si vous ne souhaitez pas étirer l'image, placez-la dans un conteneur div sans débordement et centrez-la en ajustant sa marge si nécessaire.

L'image ne sera pas recadrée
Le rapport hauteur / largeur restera également le même.

HTML:

<div id="app">
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
    <div id="container">
      <img src="#" alt="something">
    </div>
</div>

CSS:

div#container {
    height: 200px;
    width: 200px;
    border: 1px solid black;
    margin: 4px;
}
img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

Bhushan Dangore
la source

0

transform: scale(0.5);

Exemple:

<div>Normal</div>
<div class="scaled">Scaled</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.scaled {
  transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  background-color: pink;
}

voir: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

Mahmoud K.
la source

-1

si vous connaissez le rapport spectral, vous pouvez utiliser padding-bottom avec pourcentage pour définir la hauteur en fonction de la différence.

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

reco
la source

Changer les tailles d'image proportionnellement en utilisant CSS?

Réponses:

HTML:

CSS:

Exemple: