在頁面加載填充與圖像的div .class

我想加載一個圖像作爲佔位符到頁面加載時的DIV。在頁面加載填充與圖像的div .class

使用相同的圖像作爲整個站點的佔位符，我只是想把它當作背景圖片，但是當使用該解決方案時，它不能響應，我需要DIV元素響應，因爲它現在是現在。

我的div被設置爲：

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

我已經嘗試了幾個解決方案，但沒有成功。

來源

2017-02-07 Michael G

您錯過了您的代碼。 –

是我的不好！ –

背景圖像可以肯定是響應 - 請參閱'background-size'。您甚至可以在不同的斷點處更改圖像。 –

你可以試試背景包含：

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

來源

2017-02-07 21:46:43 cbertelegni

你的意思是這樣嗎？

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

來源

2017-02-07 21:47:34

好的球員，感謝您的回覆迅速。我發現我的解決方案使用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。

邁克

來源

2017-02-07 22:05:13

要顯示您的欣賞方式，請單擊幫助您的答案旁邊的複選標記;） –

此外，您不需要前綴：http://caniuse.com/#feat=background-img-opts –

如果您使用的background-size相應的版本，你可以達到你想要的結果。使用基於百分比的填充頂部來獲得按比例響應的div有一個很酷且低估的技巧。由於800x600的有3/4（75％）的高度與寬度的比例，你可以使用它作爲您的填充：

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

https://jsfiddle.net/nowk62b6/1/
注：在小提琴，調整你的屏幕直到藍色框寬800px。

你可以用你的想象力來啓動/關閉你的內容加載之前和之後的額外填充。您還可以將其放入媒體查詢中，以便在屏幕小於800像素時才起作用。

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

來源

2017-02-07 22:08:04

在頁面加載填充與圖像的div .class

回答

相關問題