|
|
|
Code HTML pour image qui s'adapte
| ||||||||
Petit astucien  | Bonjour Je fais un petit site web perso, et je voudrais mettre en haut de page une image Mais il faudrait que cette image s'adapte automatiquement à l'écran sur lequel elle s'affiche, allant du grand écran 28 pouces au smartphone, en passant par les tablettes etc... Je n'arrive pas à le faire Est-ce que certains, des pointus du Html, pourraient m'aider Merci d'avance
| |||||||
Publicité | ||||||||
|
| ||||||||
 Grande Maîtresse astucienne |
| |||||||
Petit astucien | C'"est un peu le sens de ma question J'avais trouvé un code htlm qui permettait d'afficher une image à 768, ou suivant la résolution à 1280 ou à 1600px mais ce n'était pas satisfaisant car bien souvent ou l'image était trop petite, ou elle débordait de l'écran Donc pour l'instant j'ai pris une image fixe de 1 000px, mais j'aimerai bien si possible trouver les codes pour qu'une image, et une seule s'adapte à l'écran sur lequel elle est affichée, sans débord. Merci de la réponse | |||||||
Astucien  | Salut, Et si tu essayais avec un pourcentage de la largeur ? Quelque chose du type : width=90% Il n'est pas nécessaire d'indiquer la hauteur. Si celle ci n'est pas indiquée, les proportions seront conservées. Sinon, tu as les medias queries. Tu crées une classe qui fixera la largeur en fonction de la largeur écran. Ex : @media screen and (max-width: 2000px) {
.image {
width=1000px;
}
}
@media screen and (max-width: 1000px) {
.image {
width=500px;
}
}
@media screen and (max-width: 500px) {
.image {
width=250px;
}
}
Ensuite, tu affiches ton image en utilisant la classe image <img class="image" src="monimage.png" /> Bien sûr, les medias queries ci dessus sont un exemple, tu accommodes à ta sauce. Il faut juste noter qu'il faut utiliser la plus grande largeur d'écran en premier, puis par ordre décroissant.
| |||||||
| ||||||||
Les bons plans du moment PC Astuces | Tous les Bons Plans | ||||||||||||||||||
| |||||||||||||||||||
| Forum PC Astuces | © 1997-2023 Webastuces |  |
À LA UNE
PRATIQUE
LOGITHÈQUE
TABLETTE ET MOBILE
BONS PLANS
FONDS D'ÉCRAN
JEUX
FORUM
Tu procèdes comment?
