如何根据 div 宽度调整图像大小？ [复制]答案

【问题标题】：How do i resize an image based on its div width? [duplicate]如何根据 div 宽度调整图像大小？ [复制]
【发布时间】：2014-03-29 16:22:26
【问题描述】：

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

【问题讨论】：

标签： jquery html css twitter-bootstrap svg

【解决方案1】：

另外我建议你包含max-width:100%;，这样如果你对width 进行任何更改，它就不会在任何时候落后于你的div。

【讨论】：

【解决方案2】：

既然你用的是网格系统，那为什么不把图片显示为block，用width: 100%填满整列的空间呢？

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

【讨论】：

我在这里是认真的。那太简单了！谢谢！

【解决方案3】：

你可以使用width():

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

其实，你可以给你的图片一个类，让选择器更具体。

【讨论】：

哥们我觉得?在css代码里