Question

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

我的代码是

.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>

如何解决此问题并为所有设备使用？

Answer 1

试试这个，我不知道为什么你将背景图像设置为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>

Answer 2

添加

background-repeat:no-repeat;
background-size:cover;

到你的样式表，它的工作正常。我已经添加了下面的代码段。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: