fixer la taille de l'image sans re-dimensionnement
J'ai un div
qui est width:500px;
et height:170px;
La div
contient un jquery diaporama qui devient aléatoire des images à partir de ma base de données et les affiche.
Problème est que les images sont téléchargées par les utilisateurs et peut être de tout aspect-ratio/toute taille.
J'ai besoin des images pour s'adapter à la div
sans être redimensionnée à l'aide de
style='height:x; width:x;
Fondamentalement, je veux que toutes les images soient affichées correctement et dans acutal qualité.
Je ne veux pas limiter la taille des images peuvent être téléchargées sous-ils affichés dans les autres parties du site de pleine taille/qualité.
Peut apporter une solution?
OriginalL'auteur andrew anderson | 2012-04-17
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser les CSS pour définir la taille des images dans le diaporama sans nécessairement modifier le rapport d'aspect de l'image.
régler la hauteur de l'image à la hauteur du diaporama contenant
faire de la largeur de l'auto de sorte qu'il conserve son aspect ratio
définir un max-width de sorte qu'il ne soit pas plus large que le diaporama
Remarque les images peut être plus mince que le diaporama, si la taille originale est de petite taille.
OriginalL'auteur Richard A
Vous devriez être en mesure d'utiliser CSS,
max-width
de la propriété. Vous ne souhaitez pas spécifier la largeur ou la hauteur si vous faites cela.Votre code HTML:
Et votre CSS:
Ce ne sera pas le centre de votre image à l'intérieur du conteneur, mais il devrait faire le travail pour vous.
OriginalL'auteur Corey Docken
J'ai compris comment réaliser une image redimensionner en gardant l'aspect ratio et le centrage de l'image avec un simple morceau de code CSS comme suit:
Espère que cela aide quelqu'un 🙂
OriginalL'auteur WaleedBarakat