Question Redimensionner l'image proportionnellement avec CSS?


Existe-t-il un moyen de redimensionner (réduire) les images proportionnellement en utilisant SEULEMENT CSS?

Je suis en train de faire du JavaScript, mais j'essaie juste de voir si c'est possible avec CSS.


583
2018-04-24 23:40


origine


Réponses:


Pour redimensionner l'image proportionnellement en utilisant CSS:

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

675
2018-04-26 08:28



Contrôlez la taille et maintenez la proportion:

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

193
2018-03-19 14:17



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

Exemple css:

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

95
2017-12-20 17:30



Essayer

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

66
2018-01-17 02:49



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


48
2017-09-29 15:07



Pour mettre à l'échelle une image en conservant ses proportions

Essaye ça,

img {
  max-width:100%;
  height:auto;
}

40
2017-12-10 18:01



Vous pouvez utiliser objet-fit propriété:

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

Cela s'adaptera à l'image, sans changer proportionnellement.


31
2017-09-08 16:19