我想在我的页面中显示全宽和指定高度的图像，但是在移动设备中，它并未显示全宽图像。全屏封面不在移动设备中显示
我的代码是
.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;
\t background:url('https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg');
\t background-size:cover;
}
.cover img {
width:100%;
}<div class="cover"></div>添加
background-repeat:no-repeat;
background-size:cover;
到您的样式表，它的作品fine.I'm添加下面的代码片段。
.cover {
position: relative;
width: 100%;
height: 320px;
left: 0;
top: 0;
border: 1px solid;
background: url('https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg');
background-repeat:no-repeat;
background-size:cover;
}<div class="cover"></div>你们两个都是对的 – xrcwrn
@xrcwrn选择最好的，她加我的答案也给她的帖子，因为她可能也认为很好。 –
.cover {
position: relative;
width: 100%;
left: 0;
top: 0;
border: 1px solid;
}<div class="cover">
<img class="default_cover_image" id="cover-img" src="https://static.pexels.com/photos/62272/pexels-photo-62272.jpeg" style="height:100%; width:100%;">
</div>
我下面加一个答案，不要忘了剔它，如果它是有用的：P –