Question

我为朋友建立了一个网站，它在计算机浏览器上运行良好，但在移动设备上它不能显示一个图像（其他图像工作正常）..这至少在iPhone浏览器和三星Galaxy 4浏览器。在诺基亚手机上，图像显示正常。

我实际上是在另一个设计师的工作之上构建了这个网站，但据我所知，移动浏览器的任何地方都没有嵌入特定的JavaScript。

以下HTML和CSS对应的图片不会显示：

<div id="main-content-left-container">
        <ul id="left-bullets">
            #Some bullets
    </ul>
    <img id="ups-map" src="./images/ups-map.jpg">  #Problem here
</div>


#ups-map {
  display: block;
  margin: 20px auto;
  height: 200px;
  width: 280px;
}

#ups-map:hover {
      height: 300px;
      width: 400px;
}

img {
  max-width: 100%;
  height: auto;
  width: auto\9;
}

有没有人对这可能是由什么造成任何想法？

Answer 1

试试这个：http://jsfiddle.net/rvf9R/

    <div id="main-content-left-container">
        <ul id="left-bullets">
            <li>bullet</li>
            <li>bullet</li>
            <li>bullet</li>
            <li>bullet</li>
        </ul>

        <div id="ups-map">
            <img src="http://pittsburghjedi.com/wp-content/uploads/2012/09/LOG-ren-and-stimpy-1552749-1280-1024.jpg" />
        </div>
    </div>


    <style>
    img { max-width: 100%; }

    #ups-map {
    display: block;
    margin: 20px auto;
    height: 200px;
    width: 280px;
    }

    #ups-map:hover {
        height: 300px;
        width: 400px;
    }
    </style>

手机上的图像不会显示

1 个答案: