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

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

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

我的部门设置为：

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

---

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

您可以尝试使用以下背景内容：

---

你是说像这个

.image\u结果{
最大宽度：800px；
最大高度：600px；
}

---

好了，伙计们，谢谢你们的快速回复。我用Ryan的建议和背景尺寸找到了我的解决方案。我需要最简单的方法将其实现为背景图像，然后当一个图像加载到该div以取代它时，我在这里实现了：

感谢您的帮助和反馈！我希望这个方法将来能帮助其他人。谢谢Ryan Wheale

---

Mike

如果您使用适当版本的

背景大小

，您可以获得所需的结果。使用基于百分比的填充顶部有一个很酷且不受欢迎的技巧，可以获得比例响应的div。由于800x600的高宽比为3/4（或75%），因此可以将其用作填充：

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

注意：在小提琴中，调整屏幕大小，直到蓝色框宽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%;
  }
}

---

你丢失了密码。是的，那是我的错！背景图像肯定是有响应的-请参见

背景大小

。你甚至可以在不同的断点处更改图像。我理解这一点，但是桌面上的DIV需要是800px高x 600px宽，并且无论宽度如何，都要按比例更改：100%和高度自动（比例）。我不相信，我可能错了，这并不像将图像加载到那个DIV那么简单。我可以给初始div一个宽度，但如果用户当时没有从表单中填充div，给它一个高度并不能用简单的背景图像来改变它。表示感谢的方法是单击帮助您的答案旁边的复选标记；）

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