我想在我的頁面中顯示全寬和指定高度的圖像，但是在移動設備中，它並未顯示全寬圖像。全屏封面不在移動設備中顯示
我的代碼是
.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 –