css - 强制响应图像调整大小而不是小屏幕上的段落

Question

这当然很简单，但无法正常工作。

参见 http://jsfiddle.net/2X6pJ/

<div class="media">
    <a class="pull-left" href="#">
        <img src="http://placehold.it/250x250"/>
    </a>
    <div class="media-body">
        <h3 class="media-heading">Hello</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

只希望文本段落(以及 div.media-body)始终至少占屏幕宽度的 50%，因此在较小的屏幕上，图像会变小。添加最小宽度似乎只是在图像下方强制文本。

我正在使用 twitter bootstrap，所以响应式图像的东西已经设置好了。问题是它不会生效，直到图像是唯一剩下的东西并且所有文本都移动到下面(当我调整面板大小时)。

Answer 1

如果你想在调整 div 大小时调整图像大小，试试这个:

img { 显示: block ；最大宽度:100%； }

这里有一个简单的例子:http://jsfiddle.net/2X6pJ/8/