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

时间:2017-08-24 13:30:23

标签: javascript css image reactjs

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

这是我希望适合它的div: enter image description here

但这就是它的样子:

enter image description here

我试图通过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>

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:1)

在样式表中使用

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

这在你的html中:

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

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

答案 2 :(得分:0)

没有代码所以这是猜测:

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

答案 3 :(得分:0)

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

()

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

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