CODEWITHSUNDEEP
javascriptcssimagereactjs
ambar
ambar

Reputation: 2243

How to resize a png image to fit in a div?

I am trying to resize a PNG image to fit in a div

This the div where I'd like to fit it in: enter image description here

But this is how it looks like:

enter image description here

I tried to solve it by this Changing image sizes proportionally using CSS? but no change was noticed.

Here's the code snippet:

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

Upvotes: 1

Views: 20570

Answers (4)

pr0cz
pr0cz

Reputation: 507

Use in your Stylesheet

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

and this in your html:

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

Your image will now expand to your given div size you declared in the stylesheet.

Upvotes: 4

Josh
Josh

Reputation: 4322

Why not set your image height to 100% of your div and then use width:auto ?

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

Even if the height of your div changes, the image will adjust proportionally.

Also, if you want this page to load reasonably quickly, it would definitely be worth re-sizing that image.

Upvotes: 1

silentw
silentw

Reputation: 4885

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

Upvotes: 5

user8231918
user8231918

Reputation:

There is no code so this is a guess:

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

Upvotes: 0

Related Questions