如何使用 Bootstrap 调整图像大小答案

【问题标题】：How can images be resized using Bootstrap如何使用 Bootstrap 调整图像大小
【发布时间】：2015-06-20 21:36:30
【问题描述】：

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

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

的 Div 中

 class="col-md-12 row"

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

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

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

Bootstrap v3 及以下版本。

在图片标签中使用 class="img-responsive"。这将根据屏幕大小自动调整大小。它是一个引导类。

例如：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h

引导程序 v4

在图片标签中使用 class="img-fluid"。这将根据屏幕大小自动调整大小。它是一个引导类。详情见下方评论

【讨论】：

感谢您的回答，但我在帖子中提到我有 3000 多张图片。将此类单独添加到 3000 张图像中是不可行的。
您可以在 DOM 就绪后使用 javascript/jquery 添加此属性。
@user2024285 在这种情况下只需使用通用选择器 img { width: 100% } .
Bootstrap v4 将 img-responsive 重命名为 img-fluid。 getbootstrap.com/docs/4.0/migration

【解决方案2】：

尝试将其添加到 css 中

.col-md-12 img {width:100%}

【讨论】：

【解决方案3】：

试试这个。

<div class="row">
<div class="col-md-4">
    <img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>

【讨论】：

Bootstrap 3 ➜ 4 迁移，img-responsive 已重命名为 img-fluid。 getbootstrap.com/docs/4.1/migration/#images

【解决方案4】：

只需将其添加到样式表中的某个位置，它就会应用于您网站上的所有图像。

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

【讨论】：

Tom 很准。感谢您分享您的知识。
使用 bootstrap 版本 5 就像一个魅力。谢谢汤姆！

【解决方案5】：

具有特定宽度：

<img src="assets/img/why1.png" style="max-width:20%;" alt="...">

自动宽度：

<img src="assets/img/why2.png" class="img-fluid" alt="...">

【讨论】：

【解决方案6】：

 #imgdiv { width:40vw;display:table-cell;vertical-align:middle; text-align:center;}
img {max-width:100%;height:auto;max-height:100%;}

<div class="row">
  <div id="imgdiv" class="col-sm-5 text-center">
        <img class="thumbnail img-responsive"  src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" 
            style="maxwidth:100%;height: auto;max-height: 100%;"> 
 </div>
</div>

【讨论】：