Redimensionner l’image proportionnellement avec CSS?

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

Je fais le JavaScript, mais essaye juste de voir si cela est possible avec CSS.

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

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

    Contrôler la taille et maintenir la proportion:

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

    Si c’est une image d’arrière-plan, utilisez la taille d’arrière-plan: contient.

    Exemple css:

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

    Essayer

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

    Notez que la width:50% redimensionneront à 50% de l’espace disponible pour l’image, tandis que max-width:50% redimensionnera l’image à 50% de sa taille naturelle . Il est très important de tenir compte de cette règle lors de l’utilisation de ces règles pour la conception de sites Web mobiles. Ainsi, pour la conception de sites Web mobiles, max-width doit toujours être utilisé.

    Pour redimensionner une image en conservant ses proportions

    Essaye ça,

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

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

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

    Cela s’adaptera à l’image sans changer proportionnellement.

    Revisitée en 2015:

      

    Je l’ai revisité car tous les navigateurs habituels ont désormais un fonctionnement automatique suggéré par Cherif.

    Ancienne version: Si vous êtes limité par exemple par boîte de 120×100, vous pouvez le faire

      

    Les propriétés css max-width et max-height fonctionnent très bien , mais ne sont pas supscopes par IE6 et je pense à IE7. Vous souhaitez utiliser cette hauteur / largeur afin de ne pas agrandir accidentellement une image. Vous souhaitez simplement limiter la hauteur / largeur maximale proportionnellement.

      

    a bien fonctionné pour moi https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css/… Ou est-ce que quelque chose me manque?

    Edit: Mais voyez l’avertissement de Shawn à propos de la conversion accidentelle.

    Utilisez cette technique de mise à l’échelle facile

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

    travaille pour moi. Il réduit les images plus grandes pour qu’elles tiennent dans la boîte, mais laisse les images plus petites à leur taille d’origine.

     img { max-width:100%; } div { width:100px; } 

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

    Nous pouvons redimensionner l’image en utilisant CSS dans le navigateur en utilisant les requêtes média et le principe de la conception réactive.

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

    Vous avez toujours besoin de quelque chose comme ça

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

    en haut de votre fichier css

    Essaye ça:

     div.container { max-width: 200px;//real picture size max-height: 100px; } /* resize images */ div.container img { width: 100%; height: auto; } 

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

    Je crois que c’est la manière la plus simple de le faire, également possible en utilisant l’atsortingbut de style ligne dans la .

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

    ou