responsive design Mobile -> Img sensibles ne fonctionne pas

Question

Je suis nouveau au développement web, espérons que vous pouvez me aider ci-dessous:

Je suis problème auquel est confronté à la création d'une image sensible sur mobile.

Voici mon lien vers codepen et le code:

[1] [1]: https://codepen.io/Qiyang/pen/EwEKMz

<div class="container"> 
    <div class="jumbotron"> 
<h1 class="text-center"><b>Sir Alex Ferguson</b></h1> 
<h2 class="text-center 16px"><font size="5">Manchester United legend</h2> 
    <figure> 
    <img class="img-responsive" src="https://www.thesun.co.uk/wp-content/uploads/2016/10/nintchdbpict000277927275.jpg?w=960"> 

Comme vous le voyez, j'ai ajouté img class sensible à mon image, mais sur mon Samsung mobile, l'image est toujours l'étirement de l'écran, ce qui provoque le défilement.

Si j'ajoute une largeur maximale: 100% ;, l'image s'adapte mieux même si elle disparaît encore un peu. Cela peut être dû à la marge que j'ai définie, mais la classe img-responsive n'est-elle pas censée redimensionner l'image en conséquence?

Si la classe ne redimensionne à l'écran et non la jumbrotron, comment recommanderiez-vous écrire le code pour l'adapter jumbotron?

Merci

Answer 1

Comme je vois que tu as utilisation margin-left pour img-resposive qui est la raison pour laquelle votre image déborde.

.img-responsive { margin-left: 0; max-width: 100%;} 
figure {text-align: center;} 

Modifiez cela et votre code fonctionnera.