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

Question

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

This the div where I'd like to fit it in:

But this is how it looks like:

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>

If the div is wrapped around the img tag, than you just can set `div img { width: 100% }` in your CSS — Matthias Seifert, Aug 24 '17 at 13:33
I posted you some code, which should solve your problem. :) The problem with `div img { width: 100% }` is, that does this with all images in every div you use with this stylesheet, because it is not separated through an `id` or `class`. — pr0cz, Aug 24 '17 at 14:08

score 5 · Answer 1 · answered Aug 24 '17 at 13:37

5

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

answered Aug 24 '17 at 13:37

silentw

4,835
4
25
45

pr0cz · Answer 2 · 2017-08-24T14:01:43.857

4

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.

edited Aug 24 '17 at 14:01

answered Aug 24 '17 at 13:56

pr0cz

509
7
22

score 1 · Answer 3 · answered Aug 24 '17 at 13:37

1

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.

answered Aug 24 '17 at 13:37

Josh

3,872
1
12
13

Tried it without any effect. – ambar Aug 24 '17 at 13:41

score 0 · Answer 4 · answered Aug 24 '17 at 13:33

0

There is no code so this is a guess:

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

answered Aug 24 '17 at 13:33

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

4 Answers4