html - 全宽封面未在移动设备中显示

我想在我的页面中显示全宽和指定高度的图像，该图像在桌面上正常工作，但在移动设备中不显示全宽图像。
我的代码是

.cover {
    position: relative;
    width: 100%;
    height: 320px;
    left: 0;
    top: 0;
    border: 1px solid;
}

<div class="cover">
<img class="default_cover_image" id="cover-img" style="background: url('https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg');">
</div>

如何解决此问题并使其适用于所有设备？

最佳答案

试试这个，我不知道你为什么要把背景图片设置成img标签，
<img>标记定义HTML页面中的图像。<img>标记有两个必需属性：src和alt。
您只需调用<img src="" alt=""/>即可，如果要设置背景图像，则需要设置background-size:cover

.cover {
    position: relative;
    width: 100%;
    height: 320px;
    left: 0;
    top: 0;
    border: 1px solid;
    float:left;
}
.cover img {
  width:100%;
}

<div class="cover">
<img src="https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg" alt="img"/>
</div>

以及其他方式

.cover {
    position: relative;
    width: 100%;
    height: 320px;
    left: 0;
    top: 0;
    border: 1px solid;
    float:left;
	background:url('https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg');
	background-size:cover;
}
.cover img {
  width:100%;
}

<div class="cover"></div>

关于html - 全宽封面未在移动设备中显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41374134/