ページの読み込みdiv .classに画像を取り込みます

Question

ページが読み込まれるときにプレースホルダとして画像をDIVに読み込もうとしています。

サイト全体のプレースホルダと同じイメージを使用していますが、これをバックグラウンドイメージとして使用したいと思っていますが、そのソリューションを使用しているときは応答がなく、現在DIV要素が応答している必要があります。私はしかし、誰成功し、いくつかの解決策を試してみました

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

：

私のdiv要素は、以下のように設定されています。あなたがバックグラウンドで試すことができ

Answer 1

は含まれています

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

Answer 2

あなたはこの1つのような意味ですか？

.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

よしみんな、迅速な回答に感謝します。 Ryanのバックグラウンドサイズの提案を使って私の解決策を見つけました。私はその後、画像は、それは私がここに達成している場所、だ取るためにそのdiv要素にロードされたときに、背景画像としてこれを実装するための最も簡単な方法が必要：

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

あなたの助けとフィードバックに感謝します！私は、この方法が他の誰かを将来助けてくれることを願っています。おかげでRyan Wheale。

マイク

Answer 4

あなたがbackground-sizeの適切なバージョンを使用している場合、あなたは所望の結果を達成することができます。比例的に反応するdivを持つために、パーセンテージベースのパディングトップを使用するというクールでアンダーメイドのトリックがあります。

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

https://jsfiddle.net/nowk62b6/1/
注：フィドルで、あなたの画面のサイズを変更する800×600ので、あなたのパディングとして使用することができることを3/4（または75％）の高さと幅の比を有し、青色のボックスの幅が800ピクセルになるまで

コンテンツを読み込む前と後でこの余分な埋め込みを有効/無効にする方法について想像力を使うことができます。また、画面が800pxより小さい場合にのみ影響を及ぼすように、メディアクエリーに配置することもできます。

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