图片有时仅在Chrome移动版中尺寸错误

时间:2018-08-01 13:40:22

标签: css google-chrome google-chrome-devtools

编辑:将包含div的heightwidth的大小设置为rem而不是em似乎消除了这个问题。我不知道为什么我尝试在CodePen中复制代码,以查看是否可以隔离它,但是在那儿不会发生,所以我只是希望有人以前看到过这种情况,并且可以让我知道为什么会发生这种情况。 / p>

我有一幅图像,有点像一张桌子,但事实并非如此。这只是一串包含img标签的内嵌div,当页面调整大小时,我允许div根据其默认行为折叠,因为只要我将min-width设置为确保它们至少保持两列宽。

我的问题是,即使包含div的显式设置为heightwidth(某些图像分别设置为height: 100%width: 100%)。仅在Chrome移动版(至少在PC上的Chrome,Firefox,Edge和IE以及PC和Chrome和Firefox移动版)上会发生这种情况,但有时它仍然有效-您可以不断刷新并查看不同图像的问题,有时它们都很好。 Firefox mobile每次都会很好地渲染它。

因此,我当然将手机插入PC以便在Chrome devtools中加载“远程设备”并尝试进行调查-但是,一旦我在devtools中连接到“远程设备”,手机上的图片就会立即调整为正确的位置就在我眼前有谁知道为什么会发生这种情况,或者我该怎么做才能使它们在每次负载时都能正常显示?

1 个答案:

答案 0 :(得分:0)

您可以使用bootstrap类; class='img-responsive'

请参见以下示例:

<img src="images/footballkids.jpg" class= 'img-responsive' id="img1" onmousemove="cssmouse();">