Question

我有这个简单的html，它使用了一小段引导程序：

<div id="A" class="col-4">
    <div class="img" style="background-image: url(/images/image.jpg);">
</div>
<div id="B" class="col-8">
    *some content*
</div>

及其相应的CSS：

.img { width: 100%; height: 100%; }

一切都在笔中：https://codepen.io/anon/pen/EbBGQw

图片正确显示在Chrome或Firefox（Windows或Android）上父div的整个高度上：

但是，在iOS设备上（在iPhone和iPad最近的浏览器上测试过），图像不显示：

我已经做了一些挖掘并清除了一些潜在的罪魁祸首：

我没有使用position: fixed;
我的图片不是太大
我没有使用background简写

然而，我发现在“img”div中输入任何文本都会使背景图像出现在文本后面。图像仍然不会覆盖整个div，但确实会出现。

为什么Safari没有正确显示图像？处理问题的最佳方法是什么，并使图像正确覆盖整个div？

Answer 1

将高度设置为100％时：高度只会与元素内部的高度一样大。如果里面没有任何东西，高度将为0。如果有段落（如此处所示），则高度将与段落一样大。我建议使用像素，rems或ems。
您编写图像样式背景的方式也无法在chrome中使用。我把它放在img类中而且它有效。

如果您不想将背景图片添加到您的img课程中，您可以这样做：

<div class="img" style="background-image: url('image.jpg')"><p>Testing</p></div>

＆＃13;

.img {
  width: 100%;
  height: 100%;
  background-image: url("image.jpg");
}

＆＃13;

<div class="img"><p>Testing</p></div>

＆＃13;

Answer 2

经过更多的挖掘，以及来自@Michelle Cantin的建议，我发现我的CSS忽略了我的CSS中的height: 100%。

在this great answer中，使用position: absolute;建议修复。我将相对位置应用于父元素（#A）和绝对定位到子（.img），这解决了问题。

可以看到图像覆盖整个左列，因为右栏在此笔中的高度为https://codepen.io/anon/pen/bYPzew

使用背景图像设置的图像不会在iOS中显示

2 个答案: