如何让图像响应屏幕尺寸但不逐渐缩小？

Posted 2021-05-05

我希望当屏幕尺寸从一个尺寸变为下一个尺寸时，图像只是从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>