18008 sujets

Questions générales et questions de débutants

[Résolu] Image d'accueil responsive

Bonjour à tous,

Je souhaite réaliser une image d'accueil responsive, et pour commencer, je souhaite utiliser la fonction background-size : cover, afin que mon image couvre tout mon écran, et garde ses proportions.

Mais je n'arrive pas à associer la fonction à l'image.

mon html :

<img class="dechanp" src="dechano.jpg">


mon CSS :

_______________________________________________

.dechanp {

background-size: cover;

}


évidemment les feuilles sont bien reliés.

Merci d'avance
Modérateur
Bonjour,

La propriété css background-size définit la taille d'une image ajouter dans le css via la propriété background-image.

Or, ici, ton image est ajoutée via la balise <img>, et non pas comme image de fond via background-image. Si tu souhaites utiliser la propriété css background-size, il faudrait ajouter l'image via la propriété css background-image.

Par exemple :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>background-size</title>
<style>
body {
    background-image: url(dechano.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>


Amicalement,
Meilleure solution
Administrateur
Bonjour,

tu peux également utiliser object-fit: cover; qui style les images HTML. Son support est plus récent que background-size donc un peu moins connu mais il est à présent complet avec les navigateurs modernes (edit: Edge 16+ de mémoire. IE11 n'est plus un navigateur moderne, RIP).

MDN : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
Modifié par Felipe (30 Jul 2020 - 13:57)
Sujet clos
Aller à