Discussion :

[titi_la_vermine]

Bonjour,

Je souhaite intégrer une image sur ma page web d'accueil. L'image choisie n'est pas ajustée à la taille de l'écran ( en hauteur seulement ).

Ainsi, je dois utiliser l’ascenseur de droite pour visualiser le bas de l'image. ( ce n'est pas très esthétique ! Par contre, la largeur est bien conforme à la taille de l'écran.

Pourriez-vous me dire comment ajuster automatiquement l'image sur la taille de l'écran sans tronquer l'image ?

fichier html :

Code HTML :

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

1
2
3
<div class="Affiche" >
    <img src="img/Affiche.jpg" alt="AfficheWeb />
</div>

-----

Le fichier css ne présente pas cette class Affiche.

Bonne après midi
ge

[javatwister]

Bonjour,

Es-tu prêt à déformer l'image? Parce que si tu es à 100% en largeur et que tu comptes changer la hauteur, tu vas avoir un souci...

[titi_la_vermine]

Bonjour,

Merci pour ta réponse. Le rendu en déformant l'image est vraiment pas terrible. Peux-être qu'une solution pourrait être de réduire à la fois la largeur et la hauteur de l'image. as-tu une idée pour réduire l'image de façon à ce que la hauteur soit ajustée à l'écran et que la largeur soit réduite ( pour rendre l'image ajustée en hauteur ).

Merci pour ton aide.
Amicalement
Bonne journée

[NoSmoking]

Bonjour,

de façon à ce que la hauteur soit ajustée à l'écran et que la largeur soit réduite ( pour rendre l'image ajustée en hauteur )

essaie quelque chose comme :

Code :

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

1
2
3
4
5
6
.full-image {
  display: block;
  margin: auto;
  max-height: 100vh;
  max-width: 100vw;
}