Question

我正处于第一个引导网站的开始阶段，并且不记得如何将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 n00b。

Answer 1

由于您使用的是网格系统，为什么不将图像显示为block并使用width: 100%填充列的整个空间？

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

Answer 2

您可以使用width()：

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

实际上，您可以为图像添加一个类，以使选择器更具体。

Answer 3

另外，我建议您添加max-width:100%;，以便在width对{{1}}进行任何更改时，它不会在您的div之后。

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

3 个答案: