Bootstrap 2 响应式图像

Question

我继承了一个使用 bootstrap 2 标记的网站，但图像的 html 宽度设置如下：

<img src="text.jpg" alt="blog" width="525" height="379">

因此，当此页面缩小到平板电脑视图时，图像会突破列/网格结构并且不会调整大小。

是否有课程或我可以用来使这些图像具有响应性的东西？

非常感谢

Answer 1

您可以为图像添加以下样式：

img {
  display: block;
  max-width: 100%; // Set a maximum relative to the parent
  height: auto;    // Scale the height according to the width, otherwise you get stretching
}

或者创建一个 .img 响应类并添加到图像中：

.img-responsive {
  display: block;
  max-width: 100%; // Set a maximum relative to the parent
  height: auto;    // Scale the height according to the width, otherwise you get stretching
}

这也适用于不删除宽度和高度：

<img src="text.jpg" alt="blog" width="525" height="379" class="img-responsive">