Javascript 调整图像大小，使其完全适合幻灯片，但问题仍然是用带有for循环的图像替换css代码

我使用的是猫头鹰旋转木马，我的默认代码有很好的颜色背景。但是，我不想使用彩色背景，而是想为每张幻灯片使用不同的图像。我像插入文本一样插入了一个图像，但是图像太大了，整个东西都折叠了。你能帮我做这个吗？ 在这里旋转木马代码是什么

<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel">
{% for import in mustSee %}
     <div class="owl" style="white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; font-size:12px;">{{import.title}}
    <img src="{{import.get_image_url}}" /></div>

{% endfor %}
</div>
</div>

而不是

 background : #42bdc2;

---

当然，我希望这是<代码> <代码>，因为我正在使用for循环，我也需要考虑这个问题。如何用此图像替换彩色背景？

如果我正确理解您的问题，简而言之，这就是您想要做的：

使用img src作为部门背景

您可以使用jquery轻松地完成这项工作

$(".your-div").each(function(){
  var imgSrc = $(this).find(".your-img-tag").attr("src");
  $(this).css("background","url('"+imgSrc+"')");
});

如果你不想在img标签中显示你的图像，你可以把它隐藏起来，或者用一个干净的代码把img url放到div的

data src

attr中，并使用下面的代码

$(".your-div").each(function(){
  $(this).css("background","url('"+$(this).attr("data-src")+"')");
});

---

您可以使用内联

css

更改

背景图像

属性

还要确保设置您的属性。类似这样，但考虑到您的元素和图像尺寸：

div {
  background: transparent url('fallback.jpg') no-repeat scroll center center / cover;
}

已更新，以反映您的特定元素

在css文档中，您需要

背景

规则和回退图像（我假设

.owl

是您的类名）：

现在，对于您的内联样式（注意：您不想对css规则使用

，您只想像平常一样进行更新）：

---

注意语法-

背景图像：url（“url在这里”）；显然，您应该用
{import.get\u image\u url}}
替换
url goes here
，如示例所示。
但是，查看问题的标题，有很多方法可以实现您想要的。有些人更喜欢img标记本身的方式，而不是像div bgoh shot那样分配，我在jquery方面真的很差……我有点理解你的代码，但并不完全理解。我试图替换背景：#42bdc2；是的，这就是你想要的。我要做的是，获取img url并使用jquerys将其分配为div bg，因此我需要将您的img标记替换为？？是的，这是正确的，您需要让jquery在div中选择/定位您的img标记。这是通过向您的img标记添加类名来完成的。实际上，这真的是个好主意，嗯，不确定我如何做到这一点，@mikebraa我已经更新了我的答案，以显示与您的代码相关的具体示例
div {
  background: transparent url('fallback.jpg') no-repeat scroll center center / cover;
}

.owl {
    background: #42bdc2 url('path/tp/fallback.jpg') no-repeat scroll center center / cover;
    text-align: center;
    padding:50px 0px;
    margin:3px;
    color: white;
    font-size:32px;
    border:1px white;
}

<div class="owl" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:12px; background-image: url('{{import.get_image_url}}')"></div>