移動響應設計 - > Img響應不工作

Question

我是網絡開發新手，希望你能幫助我：

我正面臨在手機上創建響應式圖像的問題。

這裏是我的鏈接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"> 

正如你看到的，我已經加入IMG響應級到我的形象，但在我的三星手機，圖像仍然伸出屏幕，導致滾動。

如果我添加一個最大寬度：100％，儘管它仍然有點偏離，但圖像更合適。這可能是由於我設定的邊距，但不是img響應類應該調整圖像的大小以適應？

如果該類僅調整到屏幕而不是jumbrotron，那麼您會如何編寫代碼以適合jumbotron？

感謝

Answer 1

，我可以看到你使用保證金離開IMG-resposive這就是爲什麼你的形象滿溢。

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

更改爲此和您的代碼將工作。