Largeur variable Site Web

J'essaie de créer un site Web de largeur variable, mais j'ai un problème avec les images. Je veux site pour avoir de plus grandes images et polices sur les moniteurs plus larges, et plus petit pour les normales. La solution à laquelle je pensais consistait à utiliser un pourcentage, mais les images (pour les boutons, l'arrière-plan et l'en-tête) ont l'air un peu mauvaises lorsqu'elles sont redimensionnées. Existe-t-il une autre solution pour redimensionner les images et le contenu en fonction de la largeur du navigateur?Largeur variable Site Web

Merci

Source

2010-11-13 Andrei

Je ne suis pas sûr de comprendre votre question. Évidemment les images à l'échelle les rendront mauvaises, alors que voudriez-vous faire? – casablanca

Si vous essayez de redimensionner des images en changeant leurs valeurs 'Height' et' Width' dans la balise '' ou dans les styles CSS, flou et pixélisé est probablement le meilleur que vous pouvez vous attendre. Généralement, les images ne sont pas redimensionnées pour s'adapter à la taille de l'écran. –

La première chose à faire est de vérifier si vous avez vraiment besoin de ces images. Je ne les ai pas vus, alors je suppose que vous en avez vraiment besoin.

Mais vous n'avez pas besoin de javascript pour le faire.

En fonction de l'audience que vous ciblez et du temps que vous avez pour créer votre site Web, vous pouvez essayer d'utiliser des requêtes de média CSS pour déterminer la largeur de l'affichage de l'utilisateur. (Vous pouvez en apprendre plus ici: http://www.alistapart.com/articles/responsive-web-design/) Vous pouvez vérifier la résolution d'affichage cible avec de simples instructions conditionnelles CSS. Si vous connaissez le type d'affichage le plus populaire parmi vos invités potentiels, vous pouvez préparer 3-4 jeux différents d'images de différentes tailles pour différents utilisateurs.

De cette façon, vous pouvez fournir différentes tailles d'images à différentes résolutions utilisateur.

Mais d'abord faire 100% vous avez besoin des images et vous obtiendrez le même effet avec CSS.

Source

2010-11-13 17:01:33 Cyrylski

Eh bien, j'ai des icônes pour chaque bouton, donc je ne vois pas comment je peux réaliser la même chose en utilisant css. Merci pour la réponse, j'essaierais cette solution au début, mais l'idée était de faire un site web entièrement redimensionnable. – Andrei

Ensuite, je suppose que vous auriez besoin de redimensionner l'image javascript + côté serveur. Je ne suis pas un bon programmeur mais je suppose que je chercherais une solution Javascript qui reniflerait les dimensions de l'affichage de l'utilisateur, enverrait les paramètres de dimension et demanderait que les images soient rechargées via une requête AJAX. Je ne connais pas de solution de redimensionnement d'image correcte qui soit assez rapide et qui ne soit pas côté serveur. – Cyrylski

Vous avez probablement besoin d'un mélange de JavaScript et CSS; utilisez JavaScript pour déterminer la dimension de l'écran et utilisez-le pour calculer le ratio de votre redimensionnement, et modifiez la propriété CSS des objets.

Vous pouvez également utiliser des tailles en em au lieu de pixels lors de l'utilisation des feuilles de style. Lorsque vous redimensionnez des images, vous devez également garder à l'esprit le rapport d'aspect. Vous ne pouvez donc pas appliquer une valeur en pourcentage à la fois à la largeur et à la hauteur.

Source

2010-11-13 16:13:43 Extrakun

Je ne comprends pas ce que vous dites sur le rapport d'aspect. Comment n'est-il pas conservé pareil en multipliant la largeur et la hauteur par le même pourcentage? –

Mmm, je suppose que j'étais fatigué et probablement penser à autre chose, vous êtes juste là. – Extrakun

Répondre

Questions connexes