如何使用Bootstrap调整图像大小

Question

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

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

 class="col-md-12 row"

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

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

Answer 1

只需在样式表中的某处添加它,它就会应用于您网站上的所有图片.

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

Answer 2

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

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