在页面加载填充与图像的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

回答

相关问题