Question

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

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

我的div设置为：

export class SomeClass{
    someVar = 'test';
}

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

Answer 1

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

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

Answer 2

你的意思是这个吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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，则可以获得所需的结果。使用基于百分比的padding-top来获得按比例响应的div是一个很酷且不被重视的技巧。由于800x600的高宽比为3/4（或75％），因此您可以将其用作填充：

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

https://jsfiddle.net/nowk62b6/1/
注意：在小提琴中，调整屏幕大小，直到蓝框为800px宽。

您可以在内容加载前后如何启用/禁用此额外填充。您还可以将其放在媒体查询中，以便仅在屏幕小于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%;
  }
}

在页面加载时使用image填充div .class

4 个答案: