我希望当屏幕尺寸从一个尺寸变为下一个尺寸时,图像只是从x像素跳到y像素,而不是在屏幕尺寸减小到相同尺寸括号时逐渐缩小。应用img-responsive使它逐渐下降,而根本没有它不会让col-x-y类工作。
您可以使用html图片标记,如下所示。在此示例中,它将根据屏幕大小加载不同的图像大小。但您也可以根据此格式调整图像宽度。代码来自this code lab.
<picture>
<source media="(min-width: 750px)"
srcset="images/horses-1600_large_2x.jpg 2x,
images/horses-800_large_1x.jpg" />
<source media="(min-width: 500px)"
srcset="images/horses_medium.jpg" />
<img src="images/horses_small.jpg" alt="Horses in Hawaii">
</picture>