javascript - 如何使用 Bootstrap 调整图像大小

Question

我有一个关于产品的网站。每篇产品文章中都有文字和一些图片。图像宽度从 400 像素到一些高达 700 像素不等。产品文章存储在 SQL Server 数据库中，文章是根据 productid 动态获取的。

我正在使用 Bootstrap 使我的网站适合移动设备。我有一个两列布局。产品文章包含在标有

的 Div 中

 class="col-md-12 row"

当我缩小页面大小以预览它在移动设备上的外观时，文本会很好地自行调整，但图像不会。现在我有大约 3000 张这样的图像，如果有一个属性我必须应用于每个单独的图像标签，那将是不可行的。

有没有其他方法可以使用 CSS、bootstrap 或 javascript 来减小设备尺寸的图像大小，同时保持图像纵横比不变？

Answer 1

只需将它添加到您的样式表中的某处，它将应用于您网站上的所有图像。

img {
  display: block;
  max-width: 100%;
  height: auto;
}