Largeur maximale de l'image CSS définie à la taille de l'image d'origine?
Pouvez-vous faire cela? Les utilisateurs téléchargent des images dans un conteneur d'une largeur 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 le width de l'image, mais uniquement le max-width.
img {max-width:100%; height:auto}
(La commande `height: auto n'est pas nécessaire, mais je la mets là pour la complétude, pour me rappeler que je veux que l'image prenne des proportions naturelles.)
Ce violon a deux cases, une plus petite que l'image et une plus grande. Comme vous pouvez le constater, l’image dans la plus petite boîte est réduite, alors que celle de la plus grande 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 du conteneur souhaité et la hauteur sur auto. Ajoutez ensuite la marge: 0px auto à celui-ci, il devrait être parfaitement centré et ne sera jamais plus grand que sa taille originale.
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.