HTML/CSS: Que dois-je utiliser pour définir l'image en hauteur et en largeur pour le rendre indépendant de la résolution?
J'ai lu sur Internet que je ne devrait pas définir les polices (ou autre) avec une absolue pixels hauteur/largeur/taille et au lieu de cela, utiliser EM ... ainsi que sur les plus haute résolution affiche, mon site web peut évoluer de façon appropriée.
Cependant, que dois-je utiliser pour définir la hauteur de l'IMAGE/largeur ... parce que les images ne seront pas à l'échelle (ils regardent pixélisé)
Mise à JOUR:
De préciser, je suis pas se référant à la page de zoom. Je fais référence à comment faire pour que mon application web indépendant de la résolution, de sorte qu'il semblera correct sur la hausse des DPI affiche.
Quelqu'un qui vous donne des conseils ne sait pas ce que em est.
Malheureusement, les images sont susceptibles d'aspect pixelisé si ne s'affiche pas dans leurs dimensions d'origine. C'est pourquoi les images avec les dimensions relatives ne sont pas dans beaucoup d'utilisation sur l'Internet en général.
Malheureusement, les images sont susceptibles d'aspect pixelisé si ne s'affiche pas dans leurs dimensions d'origine. C'est pourquoi les images avec les dimensions relatives ne sont pas dans beaucoup d'utilisation sur l'Internet en général.
OriginalL'auteur Tedy | 2010-04-23
Vous devez vous connecter pour publier un commentaire.
Je sais que cette question est un peu vieux, mais qui veulent dire ce pour n'importe qui qui peut venir plus tard. Lorsque l'on parle des appareils mobiles qui ont de plus hautes densités de pixels, le mobile, les navigateurs de zoom de la page par un montant pour le faire apparaître comme si la page web n'est pas très petit. Dispositifs de mettre en œuvre ce zoom comme par le La spécification CSS 2.1.
Par exemple, de nombreux dispositifs ont aujourd'hui un 1,5 x la densité de pixels par rapport aux moniteurs de bureau. En conséquence, le navigateur mobile zoom sites web par environ 150%, afin de compenser les pixels supplémentaires. Le nouvel écran retina a un 2x densité de pixels ratio... et en tant que tel le navigateur zooms sur les sites internet de près de 200%.
Point de la question - les développeurs ne devraient pas avoir à vous soucier de résolution différents appareils. Si vous souhaitez que vos images à afficher clairement sur la haute résolution des appareils, vous aurez besoin d'une image haute résolution. En général, vous n'avez pas à vous soucier de 1,5 x périphériques comme la différence de qualité est négligeable et n'en vaut pas la peine. Toutefois, le nouvel écran retina provoque vraiment des images floues, et, par conséquent, vous devez utiliser 2x l'image.
Donc pour l'image suivante, vous souhaitez exporter un 600x400px image pour que l'image pour l'afficher clairement sur le nouvel écran retina:
OriginalL'auteur Ryan Wheale
Tailles de police devraient être en em (ou %) parce que si l'utilisateur change la taille du texte dans IE (View > la Taille du Texte), texte mis en px (ou ont une taille fixe quelque part à l'héritage de la chaîne) ne sera pas redimensionnée. (Les autres navigateurs ont pas de problème de redimensionnement de texte mis en px.) Voir Comment la taille du texte en utilisant ems pour en savoir plus sur cette.
Images avec le px dimensions ne sont pas redimensionnées lorsque l'utilisateur change la taille du texte; les images avec em dimensions sont redimensionnée. Donc, si la taille d'une image doit être par rapport à la taille du texte (un cas rare), puis utiliser em. Sinon px dimensions est très bien.
De zoom de la page (où le navigateur rend tout plus grand ou plus petit), il n'a pas d'importance si les dimensions (texte ou image) sont définies à l'aide de em ou px.
Je ne suis pas au courant de n'importe quel navigateur qui met à l'échelle le texte en fonction de DPI. (D'après msdn.microsoft.com/en-us/library/cc849094%28VS.85%29.aspx IE8 pouvez définir une valeur par défaut de la page zoom basé sur les PPP).
...et la plupart des concepts du système de DPI sont irrémédiablement mauvais, s'ils sont offerts à tous.
OriginalL'auteur Jeffery To
Normalement, j'utilise em pour la plupart des éléments et exact de pixels pour les images. Vos images ne sont pas à l'échelle de tout le reste lorsque la taille du texte est ajusté, si vous avez besoin d'examiner l'apparence de la page à différentes tailles de texte et de les adapter si nécessaire, mais je trouve que c'est un compromis raisonnable (par rapport à l'échelle de l'images).
Eh bien, pas exactement. Vous avez le choix, comme vous l'avez souligné dans votre question. Vous pouvez redimensionner les images de ces personnes (par em), et ils seront pixélisé, ou vous pouvez laisser le même (via px) et ils ne changeront pas avec le texte. Si vous voulez vraiment soutenir les gens avec haute résolution, vous pouvez utiliser des images de haute résolution et ils n'auront pas de pixelisation avec em, mais en général que la bande passante de compromis et de corrélation plus élevé de temps de chargement de page n'est pas considéré comme acceptable.
OriginalL'auteur Mike Pelley
À l'aide de em quand la taille du texte dans IE, il devient plus grand qu'il ne devrait plus grand, et plus petit qu'il ne devrait plus en plus petits.
La solution qui fonctionne dans tous les navigateurs, est de définir une police par défaut de la taille en pourcentage de l'élément de corps:
http://w3schools.com/css/css_font.asp
Vous pouvez trouver un exemple parfait de l'image de style à l'aide de px avec le code source ici: http://w3schools.com/css/css_image_gallery.asp. Les images des échelles parfaitement avec le texte en augmentant ou en la diminuant.
OriginalL'auteur bancer
voir la solution de cette page
http://nickcowie.com/2005/elastic-images/
HTML
CSS
je n'ai lu que votre question le titre "Que dois-je utiliser pour définir l'image en hauteur et en largeur pour le rendre indépendant de la résolution?"
OriginalL'auteur Jitendra Vyas
Ce n'est pas vraiment possible de faire une page indépendante de la résolution lorsqu'il s'agit des images.
Vous pouvez utiliser SVG pour les images, parce que les graphiques vectoriels sont vraiment indepent de DPI, mais cela ne fonctionne pas bien pour les photos.
Vous pouvez utiliser des images de haute résolution et de les afficher en taille plus petite. De cette façon, lors de la taille, ils ont l'air beaucoup mieux. Sur certains navigateurs, l'échelle réduite de l'image ne sera pas trop mauvais.
C'est une page d'exemple, http://www.cssplay.co.uk/menu/em_images il a des images de haute résolution qui sont de la taille d'un ems. Sur Opera avec le zoom de la page, la haute résolution des images conservent leur clarté à la hausse des niveaux de zoom.
OriginalL'auteur luminarious
Pour la rétine appareils, vous pouvez également avoir un deuxième image double de la taille et ajouter @2x pour le nom de fichier...
donc, si vous avez un 200px x 300px image appelée image.jpg vous venez de mettre dans un autre 400px x 600px et le nom qu'il [email protected] et la rétine dispositifs d'affichage à la place.
OriginalL'auteur user2685173