Image responsive et adaptative
Bonjour,
j'ai une image de très grande taille (2880*1929) que je souhaite utiliser dans mon header. Elle contient un petit personnage central au tout milieux de l'écran. En grande résolution (écran bureautique), cela ne pose pas de problème mais en resolution plus basse (320*480 par exemple), je voudrais que le personnage occupe le centre de l'écran et que disparaisse ce qu'il y a autour.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>d-angle : a responsive answer</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="wrapper">
<img src="img/bkg.jpg">
</div>
</body>
</html> |
Code:
1
2
3
4
| img{
max-width: 100%;
height: auto;
} |
Un peu comme le fichier jointPièce jointe 429430
J'ai fini par résoudre mon problème.
Effectivement, j'avais d'abord essayer de mettre mon image en background. Cependant, n'étant pas satisfait du résultat, j'avais placé l'image dans une balise <img>... sans plus de résultat.
Une fois mon cours repris à tête reposée, j'ai finalement opté pour la solution suivante qui me donne le résultat attendu. Merci de votre aide.
Code:
1
2
3
4
5
| header{
background: url("img/bkg.jpg") top center fixed;
background-size: cover;
min-height: 1929px;
} |
L'image devant faire partie simplement du header, j'ai codé le CSS de cette façon.:mrgreen:
