如何使用 Bootstrap 使图像响应？答案

【问题标题】：How to make image responsive with Bootstrap?如何使用 Bootstrap 使图像响应？
【发布时间】：2014-12-03 01:02:25
【问题描述】：

我正在建立一个网站，该网站将列出一些出售的建筑物，并附有图片和简短的描述。由于我希望网站具有响应性，因此我正在尝试使用 Bootstrap3 网格系统。

所以我目前的html如下（running code here on bootply）：

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <article class="row property-ad">
                <div class="col-sm-4">
                    <img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
                </div>
                <div class="col-sm-8">
                    <div class="property-ad-title">Nice building</div>
                    <div class="property-ad-description">and some describing text here</div> 
                </div>
            </article>
        </div>
        <div class="col-sm-4">
            <div class="right-side-ad">
                some advertisement is going here
            </div>
        </div>
    </div>
</div>

问题在于标题和描述只能在大 (lg) 屏幕上正确显示。然而，在md 或sm 屏幕上，标题和描述部分显示在图像顶部，因为图像看起来比其容器大。我尝试给图像一个max-width: inherit;，但这似乎没有任何作用。

除了我不知道如何给它一个适当的最大宽度这一事实之外，主要问题似乎是我真的不知道我想要什么行为。因为如果图像调整其宽度，它要么会变形，要么还需要改变它的高度。但是，如果高度发生变化，它旁边的文本可能会比图像的高度更大，这也会使布局看起来很乱。

所以我的主要问题；

在处理文本旁边的图像时，使网站具有响应性的典型期望行为是什么？
我将如何实现它？

欢迎所有提示！

【问题讨论】：

标签： html css image twitter-bootstrap layout

【解决方案1】：

不要将您的自定义类用于 img，只需添加 bootstrap class for responsive images

图像响应

<div class="col-sm-4">
  <img class="img-responsive" src=".....jpg">
</div>

检查这个Bootply

【讨论】：

【解决方案2】：

简单地说：Bootstrap 有 img-responsive 类，或者你可以将 max-width: 100% 设置为 img 标签。

【讨论】：