我有一个有关产品的网站。每个产品文章中都有文字和一些图片。图片的宽度从400px到700px不等。该产品文章存储在SQL Server数据库中,并且根据productid动态获取该文章。
我正在使用Bootstrap使我的网站移动友好。我有两列布局。该产品文章包含在标有“
class="col-md-12 row"
当我缩小页面大小以预览它在移动设备中的外观时,文本会很好地进行自我调整,但是图像却无法调整。现在我大约有3000张这样的图像,如果我必须将属性应用于每个单独的图像标签,那将是不可行的。
是否有其他使用CSS或bootstrap或javascript的方式可以减少设备尺寸的图像大小,同时保持图像的长宽比不变?
最佳答案
只需将其添加到样式表中的某个位置,它将应用于您网站上的所有图像。
img {
display: block;
max-width: 100%;
height: auto;
}