18111 sujets

Questions générales et questions de débutants

[Résolu] Image responsive + cover (Gemini n’y arrive pas, ChatGPT non

Salut,

Je voudrais que mon image se retaille de façon proportionnelle. Pour cela, j’utilisais img-fluid, classe Boostrap qui a l’avantage de faire ça en responsive.
Maintenant, je voudrais que l’image fasse un cover pour les mobiles, tout en gardant son aspect quand le cover n’agit pas.
Ce que dit Gemini :
https://gemini.google.com/share/7bce49415e82

Mon code à la sauce Gemini : https://codepen.io/vZgtErTghZdQdgZA/pen/yyJzLmm
ChatGPT me dit ça : https://chatgpt.com/share/697547ed-3a44-800f-946f-7ef57d940bf6

Si quelqu’un a une ID…

Bonne soirée Smiley cligne
Modifié par myself (24 Jan 2026 - 23:30)
Modérateur
Salut,

Je passe en coup de vent :

html

<div>
  <img src="https://numerique.umontpellier.fr/wp-content/uploads/2024/07/Image-3-scaled.jpg" class="" alt="bicyclette près d'un chemin">
</div>

css : 

div{
  height: 400px; width: 100%; 
  display: flex;
  align-items: center;
  justify-content:center;
  
  img{
    object-fit:cover;
    display: block;
    height: 100%;
    width: 100%;
  }
}

Modifié par Niuxe (25 Jan 2026 - 08:51)
Meilleure solution
Prévenir un modérateur
Répondre au sujet
Aller à