如何调整png图像的大小以适应div？

Question

我正在尝试调整 PNG 图片的大小以适应 div

这是我希望适合它的div：

但这就是它的样子：

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

以下是代码段：

 <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>

Answer 1

Server certificate does not match known certificate for 'some-address'; check details in file '/home/wsgi/.neo4j/known_hosts'

Answer 2

在样式表中使用

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

这在你的html中：

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

您的图片现在将扩展为您在样式表中声明的给定div尺寸。

Answer 3

没有代码所以这是猜测：

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

Answer 4

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

()

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

此外，如果您希望合理快速地加载此页面，那么肯定值得重新调整该图像的大小。