Comment agrandir une image pleine largeur en utilisant CSS sans affecter la qualité de l'image?

J'ai fait du HTML et CSS et j'ai rencontré un problème que j'espère que quelqu'un peut aider.Comment agrandir une image pleine largeur en utilisant CSS sans affecter la qualité de l'image?

J'essaye de faire une image pleine largeur couvrir une Div entière sans une perte significative de qualité à l'image.

Un exemple de ce que je suis en train de réaliser est similaire aux sites suivants:

https://sso.godaddy.com/v1/?app=mya&realm=idp&

http://www.ugle.org.uk/

Les deux sites utilisent une image qui coutures de qualité pour ne pas se dissoudre en étant développé ou .

Comment cela est-il fait?

Tout le monde connaît des didacticiels ou avoir un exemple de code qu'ils pourraient me montrer. J'ai créé une image qui peut varier selon la taille de la fenêtre du navigateur, mais sa qualité est mauvaise lorsque le navigateur change de taille.

Merci d'avance à tous!

Source

2017-03-15 Tom J

Vous avez besoin d'une grande image. Les images référencées sont 1600x1015 et 1500x625. Vous pouvez utiliser les images via '' ou en tant qu'image de fond. Quelle taille d'image utilisez-vous maintenant? Où est ton code? – hungerstar

Créez l'image dans Photoshop et utilisez la même taille exacte et un format .png. Il ne devrait pas perdre de données. En le redimensionnant de toute façon, petit ou grand, il perdra en qualité. – OtherClare

Très facile. Il y a quelques façons de le faire, mais le plus simple est de définir l'image comme arrière-plan de la div, la taille fond ensemble de la propriété pour couvrir: background-size: cover;

Par exemple (CSS):

div { 
    background: url('path/to/your/image.jpg') no-repeat center; 
    background-size: cover; 
}

Édition: Adressage de la qualité d'image: Vous devez vous assurer que votre image d'arrière-plan est égale ou supérieure aux dimensions div. Si elle est plus petite, elle sera étirée (ce qui dégrade la qualité).

Source

2017-03-15 15:38:51

Ceci aborde une partie de la question, l'autre étant, comment limiter la dégradation de la qualité? Ce qui semble également être la partie la plus importante, comme l'a déclaré OP, _ "J'ai créé une image qui peut varier en fonction de la taille de la fenêtre du navigateur ..." _ Comment ils l'ont fait? Aucune idée. Peut-être une image réactive ou ce que vous avez posté ci-dessus. Nous devrons voir leur code pour être sûr. – hungerstar

Réponse mise à jour :) –

Vous pouvez utiliser CSS * Media Queries * pour basculer le 'url' de l'image entre différentes résolutions de la même image, ainsi les utilisateurs avec des écrans haute résolution obtiendront la meilleure qualité d'image et les utilisateurs avec des résolutions plus petites ou les téléphones recevront une version plus légère (qui se charge plus vite) – vsync

Comment agrandir une image pleine largeur en utilisant CSS sans affecter la qualité de l'image?

Répondre

Questions connexes