Image not working for 50% width of the container

Question

I want one container, containing a text with 50% on the left and on the right an image with 50%. But the image does not scale to 50% of the width. What's wrong here?

<div style="width:100%;">
<div style="widht:50%; float:left;background-color:#efefef;height:200px;width:50%;">
My Texting
</div>
<div style="width:50%; float:left;">
<img src="http://www.howtobeast.com/wp-content/uploads/2015/03/crossfit-fuengirola-slide03.jpg">
</div>

https://jsfiddle.net/kLcxnojn/

score 2 · Accepted Answer · answered Sep 05 '15 at 10:57

2

you need to give your image width 100%;

img{ width:100%; }

https://jsfiddle.net/kLcxnojn/

answered Sep 05 '15 at 10:57

ohadsas

469
2
6
22

score 1 · Answer 2 · answered Sep 05 '15 at 10:54

1

You've to define, that the image size should not extend over the maximum width of it's containing block. Just add this to your CSS.

img{
    max-width:100%;
    height: auto;
}

Fiddle

answered Sep 05 '15 at 10:54

Ramiz Wachtler

5,423
2
27
32

score 1 · Answer 3 · edited May 23 '17 at 11:51

1

From this answer:

<img src="the source" style="max-width:100%; max-height:100%;">

Demo: https://jsfiddle.net/kLcxnojn/1/

edited May 23 '17 at 11:51

Community

1
1

answered Sep 05 '15 at 10:57

Majid Fouladpour

27,709
19
72
126

Image not working for 50% width of the container

3 Answers3