在页面加载时用图像填充 div .class

Question

我正在尝试在页面加载时将图像作为占位符加载到 DIV 中。

使用相同的图像作为整个网站的占位符，我只是想将其几乎作为背景图像，但在使用该解决方案时，它没有响应，我需要 DIV 元素响应就像现在一样。

我的div设置为：

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

我尝试了一些解决方案，但都没有成功。

Answer 1

您可以尝试使用背景包含：

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

Answer 2

你是说像这样的？

    .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 的建议 background-size 找到了我的解决方案。我需要最简单的方法将其实现为背景图像，然后当图像加载到该图像时 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版本，你可以达到你想要的结果。有一个很酷的 under-appreciated 技巧，即使用基于百分比的 padding-top 来获得按比例响应的 div。由于 800x600 的 height-to-width 比率为 3/4（或 75%），您可以将其用作填充：

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

https://jsfiddle.net/nowk62b6/1/
NOTE: In the fiddle, resize your screen until the blue box is 800px wide.

您可以发挥您的想象力，了解如何 enable/disable 在您的内容加载之前和之后添加这些额外的填充。您也可以将其放入媒体查询中，以便它仅在屏幕小于 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%;
  }
}

在页面加载时用图像填充 div .class

On page load populate a div .class with image

javascript

image

onload