web-dev-qa-db-fra.com

Redimensionner l'image proportionnellement avec CSS?

Existe-t-il un moyen de redimensionner (réduire) les images proportionnellement à l'aide de ONLY CSS?

Je fais JavaScript, mais j'essaie juste de voir si cela est possible avec CSS.

htmlcssimage-resizing
639
codingbear

Pour redimensionner l’image proportionnellement à l’aide de CSS:

img.resize {
    width:540px; /* you can use % */
    height: auto;
}
739
Mkk

Contrôlez la taille et maintenez la proportion:

#your-img {
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
}
212
Cherif

S'il s'agit d'une image d'arrière-plan, utilisez background-size: contenir.

Exemple css:

#your-div {
  background: url('image.jpg') no-repeat;
  background-size:contain;
}
109
lenooh

Essayer

transform: scale(0.5, 0.5);
-ms-transform: scale(0.5, 0.5);
-webkit-transform: scale(0.5, 0.5);
70
orome

Notez que width:50% le redimensionnera à 50% de l'espace disponible pour l'image, tandis que max-width:50% redimensionnera l'image à 50% de sa taille naturelle. Ceci est très important à prendre en compte lors de l'utilisation de ces règles pour la conception de sites Web mobiles. Par conséquent, pour la conception de sites Web mobiles, max-width devrait toujours être utilisé.

48
andreszs

Pour redimensionner une image en conservant ses proportions

Essaye ça,

img {
  max-width:100%;
  height:auto;
}
45
Prasanth K C

Vous pouvez utiliser la propriété object-fit:

.my-image {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

Cela correspondra à l'image, sans changer le proportionnellement.

39
Andrii Bogachenko

Revisité en 2015:

<img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">

Je l'ai revisité car tous les navigateurs courants ont maintenant la fonction de travail automatique suggérée par Cherif, ce qui fonctionne encore mieux car vous n'avez pas besoin de savoir si l'image est plus large que plus haute.

ancienne version: si vous êtes limité par boîte de 120x100 par exemple vous pouvez le faire

<img src="http://image.url" height="100" style="max-width: 120px">
30
PetrV

Les propriétés css max-width et max-height fonctionnent super, mais ne sont pas prises en charge par IE6 et je crois que IE7. Vous voudriez utiliser ceci sur hauteur/largeur pour ne pas accidentellement redimensionner une image. Vous voudrez simplement limiter la hauteur/largeur maximale proportionnellement.

23
Shawn
<img style="width: 50%;" src="..." />

a bien fonctionné pour moi ... ou est-ce que je manque quelque chose?

Modifier: Mais voyez la mise en garde de Shawn à propos de la hausse accidentelle.

22
Adrien

Utilisez cette technique de mise à l'échelle facile

img {
    max-width: 100%;
    height: auto;
}
@media {
  img { 
    width: auto; /* for ie 8 */
  }
}
13
Geniusknight
img{
    max-width:100%;
    object-fit: scale-down;
}

travaille pour moi. Il réduit les images plus grandes pour les adapter à la boîte, mais laisse des images plus petites à leur taille originale.

13
pheon

Je pense que c’est la façon la plus simple de le faire. Il est également possible d’utiliser l’attribut inline style dans la balise <img>.

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

<img src="flower.png" class="scaled">

ou

<img src="flower.png" style="transform: scale(0.7);">
7
cREcker
img {
    max-width:100%;
}

div {
    width:100px;
}

avec cet extrait, vous pouvez le faire de manière plus efficace

4
Lenin Zapata P

Nous pouvons redimensionner une image à l'aide de CSS dans le navigateur à l'aide de requêtes multimédia et du principe de responsive design.

    @media screen and (orientation: portrait) {
img.ri {
    max-width: 80%;
  }
}

@media screen and (orientation: landscape) {
  img.ri { max-height: 80%; }
}
4
Moh K

Vous avez toujours besoin de quelque chose comme ça

html
{
    width: 100%;
    height: 100%;
}

en haut de votre fichier css

2
MikeStr

Essaye ça:

div.container {
    max-width: 200px;//real picture size
    max-height: 100px;
}

/* resize images */
div.container img {
    width: 100%;
    height: auto;
}
2
ovod

image_tag("/icons/icon.gif", height: '32', width: '32') Je dois définir height: '50px', width: '50px' à la balise d'image et ce code fonctionne à partir de la première tentative. J'ai essayé tout le code ci-dessus, mais pas de chance, donc celui-ci fonctionne. Voici le code de mon _nav.html .erb:
<%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

1
neo7