如何让图像响应屏幕大小但不逐渐缩小?

时间:2017-12-18 19:25:24

标签: html twitter-bootstrap-3

当屏幕尺寸从一个尺寸变为下一个尺寸时,我想让图像从x像素跳到y像素,而不是在屏幕尺寸减小到相同尺寸括号时逐渐缩小。应用img-responsive使它逐渐下降,而根本没有它不会让col-x-y类工作。

1 个答案:

答案 0 :(得分:0)

您可以使用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>
相关问题