Bootstrap 2 响应式图像答案

【问题标题】：Bootstrap 2 responsive imagesBootstrap 2 响应式图像
【发布时间】：2014-12-10 05:20:49
【问题描述】：

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

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

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

我可以使用什么类或其他东西来使这些图像具有响应性吗？

非常感谢

【问题讨论】：

标签： html css image responsive-design twitter-bootstrap-2

【解决方案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">

【讨论】：

【解决方案2】：

我刚刚意识到这些图像的 css 样式覆盖了引导程序。

所以他们选择了这个：

max-width:520px;

而不是引导程序：

max-width:100%;

正如我最初认为的那样，它与内联样式无关。

【讨论】：

半小时前我给你写了同样的答案。 :)

【解决方案3】：

删除 width="525" height="379" 并尝试输入 % 值。这就是问题所在。

【讨论】：