图像不适用于容器宽度的50％

Question

我想要一个容器，其中包含50％左右的文本和50％的图像。但图像不会缩放到宽度的50％。这里有什么问题？

<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

你需要给你的图像宽度100％;

img{ width:100%; } 

https://jsfiddle.net/kLcxnojn/

Answer 2

您已经定义，那它的包含块图像尺寸不应扩展到最大宽度。只需将其添加到您的CSS。

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

Fiddle

Answer 3

从this answer：

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

演示：https://jsfiddle.net/kLcxnojn/1/