Mobil Responsive Design -> Img-responsive nicht funktioniert

Question

Ich bin neu in Web-Entwicklung, hoffen, dass Sie mich auf unten helfen:

Ich bin vor Problem mit auf mobilen einen ansprechenden Bild erzeugt wird.

Hier ist mein Link und der Code codepen:

[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"> 

Wie Sie sehen, ich habe img-responsive Klasse zu meinem Bild hinzugefügt, aber auf meinem Samsung Mobile, dehnt sich das Bild immer noch aus dem Bildschirm aus und verursacht Scrollen.

Wenn ich eine maximale Breite hinzufügen: 100% ;, das Bild passt besser, obwohl es immer noch ein wenig ausgeht. Es mag an der Grenze liegen, die ich gesetzt habe, aber soll die img-responsive Klasse das Bild nicht entsprechend anpassen?

Wenn die Klasse nur die Größe des Bildschirms und nicht das Jumbotron ändert, wie würden Sie den Code für das Jumbotron schreiben?

Dank

Answer 1

Wie ich Ihnen Verwendung margin-left für img-resposive haben, dass Ihr Bild ist, warum ist überfüllt sehen kann.

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

Ändern Sie dies und Ihr Code wird funktionieren.