image - 在不同设备中显示图像的最佳方法是什么 : CSS3 or jQuery resizing?

Question

我有一个网页，其中包含不同比例的不同图像。我想以适合不同设备的最佳格式显示:台式机、平板电脑、智能手机等。

最好使用 CSS3 @media (mx-width: ** px ) 还是 jQuery $( window ).resize(function() 和 $( document ).ready(function() { 图像大小发生变化？

最后一步工作得很好，不需要像 CSS3 那样设置很多不同的媒体大小，但是如果禁用 Javascript，它将无法工作。

基本上，我希望图像具有响应性，但不是通过重新缩放设备屏幕(这是我通过 Javascript 代码得到的)，而是在页面和图像时提供容器 div 的整个宽度显示在智能手机中。我认为该方法将涉及 PHP 代码来获取客户端数据( $_SERVER['USER_AGENT'] )，因为不希望图像太大而无法超出屏幕范围，并且在使用smartphone 我不希望图像太小而看不到，这里我遇到了屏幕分辨率的问题:图像的像素可以是1200 px，但是由于屏幕像素密度或分辨率，它显示得非常小。

Answer 1

目前最好的方法是使用一种称为“响应式图像大小”的技术以及良好的旧 CSS 来处理具有相似屏幕尺寸的设备上的图像缩放。

使用 'resize' 事件通过 jQuery 操作 DOM 是导致性能不佳和用户体验不佳的一种暂存方式。

核心思想是在较小的屏幕上加载较小的图像，如果图像比需要的大，则在浏览器中缩小它们，使用:

img { 
    display: block;
    /* You should never upscale raster images in browser */
    max-width: 100%;
    height: auto;
}

这是一篇很好的文章，详细介绍了这个概念:Responsive Images in Practice

我建议查看 lazysizes ，它实现了延迟加载作为奖励。

这是您在标记中使用它的方式:

<img
    data-sizes="auto"
    data-src="image2.jpg"
    data-srcset="image1.jpg 300w,
    image2.jpg 600w,
    image3.jpg 900w" class="lazyload" />