Question

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

我正在使用Bootstrap使我的网站移动友好。我有两列布局。产品文章包含在标有

的Div中

 class="col-md-12 row"

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

有没有其他方法可以使用CSS或bootstrap或javascript我可以减小设备大小的图像大小，保持图像宽高比完整？

Answer 1

只需将其添加到样式表中的某个位置即可应用于您网站上的所有图片。

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

Answer 2

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

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

Answer 3

尝试这个。

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

Answer 4

具有特定宽度：

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

自动宽度：

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

Answer 5

尝试将此添加到css

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

Answer 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>

如何使用Bootstrap调整图像大小

6 个答案: