圖像沒有在手機上全寬

-1

我在我的網頁中使用引導，當我在小屏幕上查看我的網頁，例如iPhone7時，它中的圖像變得非常小，我試着使用@media，但它不起作用，有人可以告訴我，我在這裏失蹤是我對CSS和HTML圖像沒有在手機上全寬

<img src="example" style="width: 40%; margin: 0 auto" class="img-responsive img-center" alt="Responsive image"> 

@media (max-width: 768px) { 
      .img-responsive { 
       width: 100%; 
      } 
     }

來源

2017-06-04 Ahmed Elgabaly

刪除inline css'width：40％;'from'img' tag –

我之所以把它設置爲40％是因爲我希望它不會在大屏幕上佔滿全部寬度，所以還有另一種方式？ –

你可以創建另一個類，而不是使用內聯css –

盡你所能，避免聯樣式代碼。您需要.img-responsive類的默認寬度，以及媒體查詢以100％寬度定位較小的屏幕。

https://codepen.io/anon/pen/awzvVB

<img src="example" class="img-responsive img-center" alt="Responsive image"> 

.img-center { 
    margin: 0 auto; 
} 
.img-responsive { 
    width: 40%; 
} 

@media only screen and (max-width: 768px) { 
    .img-responsive { 
    width: 100%; 
    } 
}

順便說一句，就需要將圖像設置爲以便與margin: 0 auto使其居中塊元素（display: block）。

來源

2017-06-05 03:19:15

非常感謝很多人，這個工作，現在我明白了不同屏幕的自定義縮放工作原理 –

@Suresh Maurya，謝謝你解釋它太 –

不針對img-responsive類。添加另一個類或ID，並在最後應用帶有!impoprtant的css。

來源

2017-06-05 06:54:00

圖像沒有在手機上全寬

回答

相關問題