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-responsive类并添加到图像中：

.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">

Answer 2

我刚刚意识到这些图像的css风格超越了bootstrap。

所以他们正在接受这个：

max-width:520px;

而不是bootstraps：

max-width:100%;

这与我最初想到的内联样式无关。

Answer 3

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

Bootstrap 2响应式图像

3 个答案: