0

当然这是一个简单的，但不能让它工作。

见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 引导程序，因此已经设置了响应式图像内容。问题是它不会生效，直到图像是唯一剩下的东西并且所有文本都移动到下方（当我调整面板大小时）。

4

1 回答 1

1

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

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

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

于 2013-06-12T14:33:33.137 回答