Modifier la taille des images de manière proportionnelle à l'aide de CSS

Question

Modifier la taille des images de manière proportionnelle à l'aide de CSS

Demandé el 28 de Mars, 2013: Quand la question a-t-elle été
816708 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cela fait quelques jours que j'essaie de configurer ma galerie de vignettes pour que toutes les images aient la même hauteur et la même largeur. Cependant, lorsque je modifie le code CSS en ,

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

J'obtiens des images qui ont toutes la même taille, mais dont le rapport hauteur/largeur est étiré, ce qui ruine les images. N'existe-t-il pas un moyen de redimensionner le conteneur d'image et non l'image ? Cela me permettrait de conserver le rapport hauteur/largeur, mais de redimensionner l'image. (Cela ne me dérange pas si je coupe une partie de l'image).

Demandé el 28 de Mars, 2013 par Null

Answer 1

5 Réponses

Answer 2

204voto

jackJoe Points 5548

Il s'agit d'un problème connu de 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 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), si vous demandez à l'image d'avoir une largeur de 100 %, elle aura la largeur totale du conteneur. Le site auto à la hauteur fera que l'image aura une hauteur proportionnelle à la nouvelle largeur.

Ejemplo:

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

Répondu el 28 de Mars, 2013 par jackJoe (5548 Points )

Answer 3

47voto

hexblot Points 4531

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

Par exemple,

 height: 120px;
 width: auto;

Cela mettrait l'image à l'échelle en se basant sur un seul côté. Si vous trouvez le recadrage de l'image acceptable, vous pouvez simplement définir

overflow: hidden;

à l'élément parent, ce qui permet de rogner tout ce qui dépasserait sa taille.

Répondu el 28 de Mars, 2013 par hexblot (4531 Points )

Answer 4

29voto

dmitry_romanov Points 339

Vous pouvez utiliser le object-fit Propriété de CSS 3. 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>

Mais ce n'est pas exactement votre réponse, car elle n'étire pas le conteneur. Mais elle se comporte comme la galerie et vous pouvez continuer à styliser la fenêtre img lui-même.

Un autre inconvénient de cette solution est la faible prise en charge de la propriété CSS 3. Plus de détails sont disponibles ici : CSS 3 Object-fit Polyfill . Une solution jQuery peut également être trouvée ici.

Répondu el 8 de Juillet, 2013 par dmitry_romanov (339 Points )

Answer 5

9voto

Stan Points 169

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

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

Répondu el 30 de Avril, 2014 par Stan (169 Points )

Answer 6

5voto

DickieBoy Points 1182

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 va centrer votre image à l'intérieur d'un div 120x120 en coupant tout excès de l'image.

Répondu el 28 de Mars, 2013 par DickieBoy (1182 Points )

Modifier la taille des images de manière proportionnelle à l'aide de CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Modifier la taille des images de manière proportionnelle à l'aide de CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: