Modification de la taille d'une image proportionnellement à l'aide de CSS?
J'ai essayé pendant une couple de jours maintenant pour configurer ma galerie de miniatures de sorte que toutes les images s'affichent de la même hauteur et la largeur. Cependant lorsque je modifie le code Css pour,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
Je reçois des images, qui sont toutes de la même taille, mais l'aspect de l'image est étirée en ruinant les images. n'est-il pas un moyen de redimensionner l'image contenant pas l'image à la place? ce qui me permet de garder le ratio d'aspect. mais redimensionner l'image encore. (Je n'ai pas l'esprit si j'ai coupé une partie de l'image.)
Merci d'avance!
Vous devez vous connecter pour publier un commentaire.
c'est un problème connu avec les CSS redimensionnement, à moins que toutes les images ont la même proportion, vous n'avez aucun moyen de le faire via le CSS.
La meilleure approche serait de disposer d'un conteneur, et de redimensionner l'une des dimensions (toujours le 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), quand dire l'image pour avoir la largeur à 100%, il va faire toute la largeur du conteneur. Le
auto
à la hauteur de l'image de hauteur proportionnelle à la nouvelle largeur.Ex:
HTML:
CSS:
Vous avez besoin de fixer un côté ( par exemple en hauteur ) et l'autre à
auto
.Par exemple
Qui sera mise à l'échelle de l'image en fonction d'un seul côté. Si vous trouvez le recadrage de l'image acceptable, vous pouvez simplement mettre en
à l'élément parent, qui permettrait de découper tout ce qui risquerait de dépasser sa taille.
overflow: hidden
à la culture de l'excès deVous pouvez utiliser
object-fit
propriété css3, quelque chose commeHTML:
Il n'est pas exactement votre réponse, cependant, parce que de ne pas étirer le conteneur, mais il se comporte comme la galerie et vous pouvez garder le style de la
img
lui-même.Un autre inconvénient de cette solution est encore d'un manque de soutien de la propriété css3. Plus de détails sont disponibles ici: http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/. jQuery solution peut être trouvée, il y a l'.
Pour faire des images réglable et flexible, vous pouvez utiliser ceci:
Le mettre en fond d'écran sur votre titulaire par exemple
Ce centre de votre image à l'intérieur d'un 120x120 div hacher le tout excès de l'image
si vous connaissez le ratio de spect vous pouvez utiliser padding-bottom avec un pourcentage de régler la hauteur en fonction de la diff.