我有一个有关产品的网站。每个产品文章中都有文字和一些图片。图片的宽度从400px到700px不等。该产品文章存储在SQL Server数据库中,并且根据productid动态获取该文章。

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

 class="col-md-12 row"

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

是否有其他使用CSS或bootstrap或javascript的方式可以减少设备尺寸的图像大小,同时保持图像的长宽比不变?

最佳答案

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

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

09-25 18:35
查看更多