Image responsive et adaptative

**CCACC02** · 23/11/2018, 21h23

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
img{
	max-width: 100%;
	height: auto;
}

Un peu comme le fichier jointPièce jointe 429430

**ProgElecT** · 23/11/2018, 22h59

Salut

Ta pièce jointe doit être corrompue, le lien ne fonctionne pas.

Invité · 24/11/2018, 09h17

Bonjour,

1- ce type d'image ("décorative") se met en background.
Pas dans une balise <img>.

2- il faut adapter la taille et résolution des images en fonction de celles de l'écran.

3- avec les media queries, on affiche la "bonne" image.

4- Si néanmoins tu veux conserver la balise <img>, il est possible d'y définir plusieurs images, en fonction de la résolution.
Voir les attributs sizes et srcset.

**CCACC02** · 24/11/2018, 13h56

Envoyé par ProgElecT

Salut

Ta pièce jointe doit être corrompue, le lien ne fonctionne pas.

Nom : exemple.png
Affichages : 592
Taille : 6,5 Ko

**psychadelic** · 24/11/2018, 19h22

Envoyé par jreaux62

4- Si néanmoins tu veux conserver la balise <img>, il est possible d'y définir plusieurs images, en fonction de la résolution.

heu, ne s'agirait-il pas plutôt de la balise picture ?

j'en ai parlé ici : https://www.developpez.net/forums/d1.../#post10216132

Invité · 24/11/2018, 19h53

A LIRE, en complément :

Images adaptatives

**CCACC02** · 27/11/2018, 18h36

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Image responsive et adaptative

Responsive design en CSS

Discussions similaires

Partager

Partager