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/

Answer 1

you need to give your image width 100%;

img{ width:100%; }

https://jsfiddle.net/kLcxnojn/

Answer 2

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

Answer 3

From this answer:

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

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