> Tous les forums > Forum des Webmasters
 Code HTML pour image qui s'adapte
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Patrice42
  Posté le 10/02/2017 @ 11:01 
Aller en bas de la page 
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é
elle
 Posté le 11/02/2017 à 18:40 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Tu procèdes comment?

Patrice42
 Posté le 11/02/2017 à 20:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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

zoulouman
 Posté le 12/02/2017 à 09:12 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
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.

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
18,09 €Set de 30 lames bois et métal Bosch pour scies sauteuses + boite à 18,09 €
Valable jusqu'au 22 Octobre

Amazon fait une promotion sur le set de 30 lames bois et métal Bosch pour scies sauteuses avec leur boite de rangement à 18,09 €. On trouve l'ensemble ailleurs à partir de 36 €. Les lames portent les références T119BO, T111C et T118A (10 lames de chaque).


> Voir l'offre
43,00 €Clavier Corsair K55 RGB à 43 €
Valable jusqu'au 22 Octobre

Amazon fait une promotion sur le clavier Corsair K55 RGB qui passe à 43 € livré gratuitement au lieu de 60 €. Avec ses touches silencieuses et ses 6 touches macros, vous avez à votre disposition une surface de jeu idéale et performante. Ce modèle embarque la technologie anti-ghosting, des touches multimédia et un repose-poignet amovible.


> Voir l'offre
19,99 €Tondeuse sans fil Philips MG3720/15 + 8 accessoires à 19,99 €
Valable jusqu'au 22 Octobre

Amazon fait une promotion sur la tondeuse sans fil Philips MG3720/15 qui passe à 19,99 € alors qu'on la trouve ailleurs à partir de 35 €. Cette tondeuse peut tailler et sculpter la barbe, les cheveux, ... 3 sabots cheveux (9, 12 et 16 mm), 2 sabots barbe (1 et 2 mm), sabot barbe ajustable (3 à 7 mm).


> Voir l'offre

Sujets relatifs
code html pour info-bulle
myspace: code html pour ajouter une webcam
Code HTML pour positionner un fond de page web
besoin d'aide pour code html
Code HTML pour Outlook
aide pour corriger mon code html
Indiquer un code html sur une page web
code html / css / js
insertion code html
Code html
Plus de sujets relatifs à Code HTML pour image qui s''adapte
 > Tous les forums > Forum Forum des Webmasters