如何调整png图像的大小以适合div？答案

【问题标题】：How to resize a png image to fit in a div?如何调整png图像的大小以适合div？
【发布时间】：2018-02-02 10:00:31
【问题描述】：

我正在尝试调整 PNG 图像的大小以适合 div

这是我想要放入的 div：

但这就是它的样子：

我试图通过 Changing image sizes proportionally using CSS? 解决它，但没有发现任何变化。

这里是sn-p的代码：

 <div className="Card-header">
                {this.props.roadmapID}
                <label className="Card-header-status">{this.props.technology.toString().replace(/,/g , " ")}</label>
                <label>{this.props.category}</label>
                <img src="images/dark_chat.png"></img>
                <CardStatus
                    status = {this.props.status}
                    onClickStatus = {this.props.onClickStatus}
                />
            </div>

【问题讨论】：

你也可以分享你的代码
如果 div 被 img 标签包裹，那么你可以在 CSS 中设置 div img { width: 100% }
我给你贴了一些代码，应该可以解决你的问题。 :) div img { width: 100% } 的问题是，它对您使用此样式表的每个 div 中的所有图像执行此操作，因为它没有通过 id 或 class 分隔。
请将答案标记为正确的答案:)

标签： javascript css image reactjs

【解决方案1】：

没有代码所以这是一个猜测：

 <div MB018>
       <img src="whatever.jpg" width="10px" height="10px">
 </div>

【讨论】：

【解决方案2】：

div.Card-header > img {
    max-width: 100%;
    max-height: 100%;
}

【讨论】：

【解决方案3】：

为什么不将图像高度设置为 div 的 100%，然后使用 width:auto ？

<img src="/path/to/your-image.png" style="height:100%; width:auto;" >

即使你的 div 的高度发生变化，图像也会按比例调整。

此外，如果您希望此页面能够合理快速地加载，则绝对值得重新调整该图像的大小。

【讨论】：

试了没有任何效果。

【解决方案4】：

在样式表中使用

 .Card-header {
        width: XYpx;
        height: XYpx;
    }

这在你的 html 中：

<div class="card-header">
<img src="yourpic.jpg" style=" width:100%; height:100%;">
</div>

您的图像现在将扩展为您在样式表中声明的给定 div 大小。

【讨论】：