Si nous faisons une mise en page fluide, nous pouvons utiliser em ou% pour la largeur et la hauteur de la police et de la div pour faire du fluide mais comment rendre les images redimensionnables?Comment rendre les images redimensionnables dans une mise en page flexible?
Je veux faire une mise en page pour toutes les tailles et appareils
Joel Spolsky réussi à trouver une solution très facile (une petite définition CSS propriétaire pour IE). Il a trouvé la solution here.
Je pense que vous devrez utiliser l'élément canvas de HTML5. Ou vous pourriez avoir du JavaScript qui définit la taille de l'étiquette de l'image, mais vous auriez à faire quelques calculs pour déterminer les proportions correctes.
La prise en charge JavaScript n'est pas bonne sur les appareils mobiles et HTML 5 n'est pas pris en charge dans de nombreux navigateurs. –
Il n'y a pas de solution simple pour cela. Vous pouvez utiliser des unités flexibles pour les images, tout comme vous le pouvez pour vos autres éléments de page. Mais cela se traduira par des inefficacités et des problèmes esthétiques, y compris la taille excessive du fichier pour une image minuscule (si vous le dimensionnez), la pixellisation des images de taille, etc. Donc, ce que vous voulez, c'est commencer par une grande image vers les versions de taille appropriée, et utiliser Javascript pour écrire une étiquette se référant à l'image de taille correcte en fonction du contexte.
La création de plusieurs tailles est rapide (à la fois dans l'espace global requis et bw). Je pense vraiment que l'information de Joel est la meilleure solution. Il vous permet d'utiliser un seul fichier image (qui peut être mis en cache pour toutes les tailles) et de continuer votre journée. –
Eh bien, vous peut des images de taille par rapport à la largeur de la fenêtre (par exemple. img.thing { width: 50%; }, mais vous ne voulez généralement pas. Images redimensionnées seront au mieux (lorsque le navigateur ne Redimensionnement bicubique) regarder un peu floue, et le plus mauvais blocky/jaggy (redimensionnement du plus proche voisin) Vous pouvez inclure du CSS (SVG's image-rendering sera supporté pour HTML dans Firefox 3.6; -ms-interpolation-mode dans IE) pour essayer d'inciter les navigateurs à utiliser le meilleur mode de mise à l'échelle, mais c'est loin d'être fiable et toujours le meilleur rendu n'est pas que grand
En outre, CSS background-image s ne peuvent pas être redimensionnées du tout (encore;. il est proposé pour CSS3 mais vous aurez une longue attente). La mise en page liquide a généralement pour but d'ajuster les distances entre les images de taille fixe pour répondre aux changements de la largeur de la fenêtre, plutôt que de mettre à l'échelle toute la page, y compris les images. L'utilisateur peut, au moins dans les navigateurs modernes, zoomer sur toute la page, y compris les images elles-mêmes, en prenant la qualité de l'image atteinte si nécessaire.
bel article. Merci de m'avoir indiqué! +1 –
pas vu cet article avant. Grande trouvaille –