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

Posted 2023-03-05

【中文标题】如何根据 div 宽度调整图像大小？ [复制]

【英文标题】：How do i resize an image based on its div width? [duplicate]

【发布时间】：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" ></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:  ???

对于任何发布协议问题，我们深表歉意。 *** n00b。

【参考方案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代码里