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;，但这似乎没有做任何事情。

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

所以我的主要问题;

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

欢迎所有提示！

Answer 1

不要只为img使用自定义类添加bootstrap class for responsive images

img-responsive

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

选中 Bootply

Answer 2

简单说明：Bootstrap具有img-responsive类，或者您可以将max-width: 100%设置为img标记。

如何使用Bootstrap使图像响应？

2 个答案: