Set Image width using inline css

Question

I want to set the width of Image. here is my code :-

<div style="width: 630px;">
        <img src="Image/welcomeimage.jpg" alt="no image" />
  </div>

Here is my situation, I don't have to set the width of Image. Only I can set the width of Div. So I have to set the image width using div. How can I do this?

[Edit] Thanks to all for helping me. Now I solved my problem. Initially, I was told not to use CSS, I had to solved this issue using Inline CSS. But It was not possible. So I decided to use CSS.

Do you mean you want to set the width of your image via the width of your div? — gaynorvader
– gaynorvader, Commented Apr 23, 2013 at 11:19
Whatever you do, you will not come around to set at minimum once styles for the img. If your image would have a width of 100%, then you could set the width with the div. — Sven Bieder
– Sven Bieder, Commented Apr 23, 2013 at 11:20

Community · Accepted Answer · 2020-06-20 09:12:55Z

6

Use `max-width`

You can use the max-width property which is supported in all modern browsers and IE 8 and above.

To use it call it in your css like so:

div img { max-width: 100%; }

This will stretch your image to the div's width.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 23, 2013 at 11:26

hitautodestruct

21.1k15 gold badges76 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahmad Alfy Over a year ago

This is the only correct answer. Also note that you will have to set box-sizing to border-box if your image has borders

NielsC · Accepted Answer · 2013-04-23 11:21:21Z

4

Just do this if you want to set the width inline:

<div>
    <img src="Image/welcomeimage.jpg" alt="no image" width="630" />
</div>

answered Apr 23, 2013 at 11:21

NielsC

3441 silver badge8 bronze badges

Comments

Artur · Accepted Answer · 2013-04-23 11:20:30Z

1

Try in css file sth like this:

div img {
    width: 630px;
}

Can you use JavaScript (for example jQuery)?

answered Apr 23, 2013 at 11:20

Artur

337 bronze badges

Comments

Rajender Joshi · Accepted Answer · 2013-04-23 11:32:29Z

1

This works. I never changed img explicitly.

<div class="test" style="width: 630px;">
        <img src="http://i.imgur.com/FIylGsy.jpg" alt="no image" />
</div>

CSS:

.test > *{
    width:100%;
}

Demo

edited Apr 23, 2013 at 11:32

answered Apr 23, 2013 at 11:20

Rajender Joshi

4,2251 gold badge26 silver badges41 bronze badges

4 Comments

Rajesh Biswas Over a year ago

Thanks sonu, but as I said I can't write anything for image.

Sven Bieder Over a year ago

@Jacob You tell he can use CSS and then give an example in javascript? I'm amazed.

Rajender Joshi Over a year ago

@RajeshBiswas I misunderstood you. I thought you don't want to set any static width for img.

Rajender Joshi Over a year ago

@RajeshBiswas Updated. Is this helpful now?

Jacob · Accepted Answer · 2013-04-23 11:22:36Z

0

You can se the width of the image dynamically using Javascript:

Pseudo:

var div = document.getElementById("yourDiv");
var width = div.style.height;
yourImg.style.width = width;

answered Apr 23, 2013 at 11:22

Jacob

4,07124 gold badges92 silver badges151 bronze badges

Comments

user2255273 · Accepted Answer · 2013-04-23 11:23:57Z

0

Use the following css

img {
    width: 100%;
}

answered Apr 23, 2013 at 11:23

user2255273

9481 gold badge11 silver badges29 bronze badges

Collectives™ on Stack Overflow

Set Image width using inline css

6 Answers 6

Use `max-width`

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Use max-width

1 Comment

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Use `max-width`