IOS下圖片不能顯示問題的解決辦法

夕水發表於2018-11-17
iOS

最近遇到這樣一個問題，在HTML5手機頁面中，直接給<img>標籤設定寬高，即便圖片路徑正常，在IOS真機下也是無法顯示的，而在安卓以及瀏覽器的模擬真機上都是正常顯示的，這是為什麼呢？

html:

<img src="xxxx.png" />
//假定圖片路徑正常

css:

img{
  width:100px;
  height:100px;
}

這樣，圖片在安卓以及模擬真機上是能夠正常顯示的，而在IOS手機下無法正常顯示。

有人提供給我一個解決辦法，給img標籤加一個父級元素，給父級元素設定寬高，然後給img標籤設定寬高100%，如下:

html:

 <div class="img-container">
        <img src="xxx.png" />
        //假定圖片路徑正常
    </div>

css:

   .img-container{
      width:100px;
      height:100px;
   }
   .img-container img{
     width:100%;
     height:100%;
   }

這樣圖片就能在IOS手機上正常顯示了，不知還有更好的辦法嗎？

相關文章