如何根据div宽度调整图像大小？

Question

我正在进行我的第一个Bootstrap网站的初步阶段，但不记得如何将 document.getElementByClass("mydiv").offsetWidth 传递到CSS中以便动态缩放其中包含的SVG图像。

HTML：

  <div class="col-3 col-sm-3 col-lg-3">
        <div class="panel">
            <div class="panel-heading">
                <h2 >Title</h2>
            </div> <!-- end panel-heading -->
            <a href="link.html"><img src="images/image.svg" alt="Title"></a>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div> <!-- end panel -->
    </div> <!-- end .col-3 .col-sm-3 .col-lg-->

CSS样式：

.panel  img {
    width:  ???
}

很抱歉如果有任何张贴协议问题。我是Stackoverflow的新手。

- 0ICU812

Answer 1

既然您正在使用网格系统，为什么不将图像显示为block，并使用width: 100%来填充整个列的空间呢？

.panel  img {
    display: block;
    width: 100%;
    height: auto;
}

- Mimi

---

我在这里认真地扇自己的脸。那太简单了！谢谢！ - 0ICU812

Answer 2

您可以使用width()：

$('img').each(function() {
    var panelWidth = $(this).closest('.panel').width();
    $(this).width(panelWidth);
});

实际上，您可以给您的图片添加一个类，以使选择器更具体化。

- Felix

---

伙计，我认为?在CSS代码中。 - Deepak Ingole

Answer 3

我建议您加入max-width:100%;，这样如果您对width进行任何更改，它就不会随时超出您的

。

- Coderapper