Abdeckung in voller Breite wird nicht in Mobilgerät angezeigt

Question

Ich möchte Bild in voller Breite und angegebene Höhe in meiner Seite anzeigen, die ordnungsgemäß mit dem Desktop funktioniert, aber in mobilen zeigt es nicht Bild in voller Breite.

Mein Code ist

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

, wie dieses Problem zu beheben, und es für alle Geräte machen zu arbeiten?

Answer 1

Versuchen Sie damit, ich weiß nicht, warum Sie Hintergrundbild img Tag, Tag <img> definieren ein Bild in einer HTML-Seite. Das Tag hat zwei erforderliche Attribute: src und alt.

Sie können einfach <img src="" alt=""/> nennen, und wenn Sie Hintergrundbild festlegen wollen, müssen Sie 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>

und andere Art und Weise mit

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

einstellen

Answer 2

hinzufügen

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

zu Ihrem Stylesheets, es funktioniert fine.I'm das Snippet unten hinzugefügt.

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

Answer 3

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