Changer les tailles d’image proportionnellement en utilisant CSS?

J’essaie depuis quelques jours 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 pour,

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

J’obtiens des images qui ont toutes la même taille, mais le rapport hauteur / largeur est en train de gâcher les images. N’y a-t-il pas moyen de redimensionner le conteneur d’images et non l’image? me permettant de garder le ratio d’aspect. mais redimensionnez l’image encore. (Cela ne me dérange pas si je coupe une partie de l’image.)

Merci d’avance!

    C’est un problème connu avec le redimensionnement de 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 fera toute la largeur du conteneur. L’ auto à la hauteur fera que l’image aura la hauteur proportionnelle à la nouvelle largeur.

    Ex:

    HTML:

     

    CSS:

     .container { width: 200px; height: 120px; } /* resize images */ .container img { width: 100%; height: auto; } 

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

    Par exemple

      height: 120px; width: auto; 

    Cela permettrait de mettre l’image à l’échelle d’un seul côté. Si vous trouvez que le rognage de l’image est acceptable, vous pouvez simplement définir

     overflow: hidden; 

    à l’élément parent, ce qui supprimerait tout ce qui dépasserait sinon sa taille.

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

     < !doctype html>       

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

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

    Mettez-le en arrière-plan sur votre support, par exemple

     
     

    Cela va centrer votre image dans un div 120×120 en découpant tout excès de l’image

    Si vous connaissez le ratio spect, vous pouvez utiliser le paramètre padding-bottom avec un pourcentage pour régler la hauteur en fonction du diff.

     
    i have 33% height of my parents width