Question

当然这很容易，但无法正常工作。

<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 div.media-body）始终至少为屏幕宽度的50％，因此在较小的屏幕上，图像会变小。添加最小宽度似乎迫使图像下方的文字。

我正在使用twitter bootstrap，因此已经设置了响应式图像内容。问题是它不会生效，直到图像是唯一剩下的并且所有文本都移到下面（当我调整面板大小时）。

Answer 1

如果要在调整div的大小时调整图像大小，请尝试以下操作：

img { display: block; max-width: 100%; }

这是一个简单的示例：http://jsfiddle.net/2X6pJ/8/

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

1 个答案: