Beim Laden einer Seite div.class mit Bild füllen

Question

Ich versuche ein Bild als Platzhalter in ein DIV zu laden, wenn die Seite geladen wird.

Mit dem gleichen Bild als Platzhalter für die gesamte Website, möchte ich einfach dies als Hintergrundbild, ABER wenn Sie diese Lösung verwenden, reagiert es nicht und ich brauche das DIV-Element reagieren wie es jetzt ist .

Mein div eingerichtet ist wie:

<div class='image_result'></div> 

Ich habe ein paar Lösungen versucht, aber ohne Erfolg.

Answer 1

Sie mit Hintergrund versuchen können enthalten:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Answer 2

Sie wie diese bedeuten?

.image_result { 
 
     max-width:800px; 
 
     max-height:600px; 
 
    }

<div class="image_result"> 
 
    <img src="http://www.tazzee.com/images/A_med_grey_lg.jpg" alt="" height="auto" width="100%"> 
 
    </div>

Answer 3

Okay Jungs, danke für die schnellen Antworten. Ich fand meine Lösung mit Ryans Vorschlag in Hintergrundgröße. Ich, der einfachste Weg, um dies als Hintergrundbild zu implementieren, dann, wenn ein Bild in diesem div geladen zu nehmen seinen Platz, was ich hier erreicht haben:

https://jsfiddle.net/mikon1982/hc969u9j/

.image_result { 
    width: 100%; 
    padding-bottom: 75%; 
    background-color:#f4f4f4; 
    background: url(https://placeholdit.imgix.net/~text? txtsize=33&txt=BG%20Image%20Here&w=800&h=600) no-repeat center center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    position: relative; 
} 

Schätzen Sie Ihre Hilfe und Feedback! Ich hoffe, dass diese Methode jedem anderen in der Zukunft hilft. Danke Ryan Wheale.

Mike

Answer 4

Wenn Sie die entsprechende Version von background-size verwenden, können Sie das gewünschte Ergebnis erzielen. Es gibt einen coolen und unterschätzten Trick, prozentbasiertes Padding-Top zu verwenden, um ein proportional reagierendes div zu haben. Da 800x600 hat eine Höhe-Breite-Verhältnis von 3/4 (oder 75%) können Sie verwenden, die als Ihre padding:

.image_result { 
    background-size: cover; 
    padding-top: 75%; 
} 

https://jsfiddle.net/nowk62b6/1/
HINWEIS: In der Geige, die Größe Ihres Bildschirms bis die blaue Box 800 Pixel breit ist.

Sie können Ihre Vorstellungskraft verwenden, um diese zusätzliche Auffüllung vor und nach dem Laden Ihrer Inhalte zu aktivieren/deaktivieren. Sie können das auch in eine Medienabfrage einfügen, so dass es nur wirksam wird, wenn der Bildschirm kleiner als 800 Pixel ist.

.image_result { 
    background-size: contain; 
    width: 800px; 
    height: 600px; 
} 
@media screen and (max-width: 800px) { 
    .image_result { 
    width: auto; 
    height: auto; 
    padding-top: 75%; 
    } 
}