Largeur d’image CSS définie sur la taille de l’image d’origine?

Pouvez-vous faire cela? Je demande aux utilisateurs de télécharger des images dans un conteneur dont la largeur est de 100%, mais je ne veux pas que les images soient plus grandes que leur taille d’origine. Merci beaucoup!

Il suffit de ne pas définir la width de l’image, uniquement la max-width .

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

(Le `height: auto n’est pas nécessaire, mais je le mets pour être complet, pour me rappeler que je veux que l’image ait ses proportions naturelles.)

Ce violon a deux cases, une plus petite que l’image et une plus grande. Comme vous pouvez le voir, l’image dans la petite boîte est réduite, tandis que celle de la plus grande boîte a sa taille normale.

Vous pouvez définir la largeur maximale de l’image dans une balise de style sur l’image elle-même. Ensuite, dans la feuille de style, définissez le type d’affichage sur “bloquer”, la largeur sur le pourcentage souhaité du conteneur et la hauteur sur auto. Puis ajoutez une marge: 0px auto à celle-ci et elle devrait être parfaitement centrée et ne sera jamais plus grande que sa taille d’origine.

S’il s’agit d’images téléchargées par l’utilisateur et que vous utilisez PHP par exemple, recherchez la largeur de l’image à l’aide de getImageSize () et ajoutez la balise de style par programmation à l’image.