Bild sollte ansprechbar sein und sollte auf dem gesamten Bildschirm

Ich habe 2 divs benannte erste und zweite, und ich habe festgelegt von ihnen die Breite und Höhe als 100%Bild sollte ansprechbar sein und sollte auf dem gesamten Bildschirm

.first{ 
    width : 100%; 
    height : 100%; 
} 
.second{ 
    width : 100%; 
    height : 100%; 
}

jetzt gefüllt werden Ich mag wäre ein hinzufügen Bild in jedem Div. Diese Bilder sollten das gesamte div ausfüllen.

<img src="someimage.png" width="100%" height="100%"/>

Mein Problem ist das Bild sollte nicht gestreckt werden, sollte es den gesamten Bildschirm gefüllt werden. Ich habe img img-responsive Klassen verwendet, um dies zu erreichen. Das Bild wird jetzt ohne Dehnung gefüllt, aber wenn die Größe geändert wird, wird es gleichmäßig skaliert und die Höhe wird ebenfalls verringert, daher wird die Höhe des Bildes jetzt nicht zu 100% gefüllt. Gibt es eine Möglichkeit, Breite und Höhe eines Bildes zu erreichen, um den gesamten Bildschirm abzudecken, ohne die Höhe zu dehnen und zu verkleinern?

Quelle

2016-11-19 Harish

Nicht wirklich ... Sie müssen bedenken, dass Ihr Bildschirm nicht jemand anderen sein kann. Sie können die Breite des Bildes auf 100% einstellen, aber die Einschränkungen des Bildes bestimmen die Höhe. Wenn Sie sicherer sein möchten, sollten Sie ein Bild aufnehmen, das genügend Höhe hat oder gedehnt werden kann. – Daniel

Der beste Weg, dies zu erreichen, ist, das Bild als Hintergrund der divs zu verwenden, anstatt es als Bild hinzuzufügen. Können Sie das tun? oder brauchst du es als individuelle Tags? – phobia82

Check this out, und Sie sollten width: 100% neben min-height: 100% verwenden, aber ich recommend Sie background-image mit background-size: cover

.first{ 
    width : 100%; 
    height : 100%; 
} 

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.first img { 
    width: 100%; 
    min-height: 100%; 
} 

<div class="first"> 
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/> 
</div>

jsFiddle

Quelle

2016-11-19 08:49:11 Pedram

Danke. Ich werde es versuchen. – Harish