Faites évoluer dynamiquement les images pour les adapter à une largeur et une hauteur spécifiées
Donc après des recherches approfondies et des tonnes de jQuery et Javascript solutions que je ne pouvais simplement pas trouver un moyen de l'échelle de manière dynamique les images à une taille donnée, à la fois horizontalement et verticalement, j'ai trouvé des tonnes d'informations sur la mise à l'échelle pour s'adapter à la largeur sage et garder le ratio d'aspect, ou mise à l'échelle pour s'adapter à la hauteur de sage et de garder le ratio d'aspect, mais je ne pouvais pas comprendre si l'image est trop grande ou trop court, et d'ajuster en conséquence.
Donc, dans mon exemple, j'ai eu un <div>
avec un ensemble de largeur de 460px et d'une hauteur de 280px, et j'ai besoin de l'image pour s'adapter à, tous les de lui-même dans ce domaine sans l'étirer (en maintenant son ratio d'aspect)
source d'informationauteur Chris James Champeau | 2012-06-18
Vous devez vous connecter pour publier un commentaire.
Maintenant, après de bidouiller avec une certaine largeur des exemples de mes classiques de l'algèbre des compétences des coups de pied.
Si j'ai pris la largeur et divisé par la hauteur, de sorte que dans ce cas, 460/280 vous recevoir en retour 1.642... qui est le ratio d'aspect de la zone, maintenant, si j'ai regardé le ratio d'aspect de l'image, je savais que si c'était plus grande que 1.642... que cela signifiait que c'était plus large que la surface, et si le ratio d'aspect de l'image était moins, qu'il était plus grand.
Alors je suis venu avec le suivant,
Et il a parfaitement fonctionné, j'ai donc pensé que je voudrais partager, j'espère que cela aidera certaines personnes à
Si je comprends votre question correctement, j'ai de plus simple moyen de mise à l'échelle des images serait d'utiliser le code CSS suivant des règles de style:
Ces deux règles de style vous permettre de spécifier la largeur/hauteur d'une image. Le navigateur à l'échelle de l'image vers le bas (en conservant les proportions) pour s'adapter à la taille que vous spécifiez. Vous pouvez également utiliser ces deux spécifier un minimum largeur/hauteur d'une image: