html - 如何使用 Bootstrap 使图像响应？

Question

我正在建立一个网站，该网站将列出一些待售建筑物，并附有图片和简短描述。因为我希望网站能够响应，所以我尝试使用 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;，但这似乎没有任何作用。

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

所以我的主要问题是；

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

欢迎所有提示!

Answer 1

不要将您的客户类用于 img，只需添加 bootstrap class for responsive images

img-responsive

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

检查这个 Bootply