Question

我有一个不同比例的不同图像的网页。我想以最佳格式显示不同的设备：台式机，平板电脑，智能手机等。

最好使用CSS3 @media (mx-width: ** px )或 jQuery $( window ).resize(function()和$( document ).ready(function() {更改图片大小？

最后一步非常有效，并且不需要像CSS3那样设置很多不同的媒体大小，但是如果Javascript被禁用则无法工作。

基本上，我希望图像能够响应，但不能重新缩放设备的屏幕，这是我用Javascript代码获得的，但是在页面和图像时提供容器div的全宽度显示在智能手机中。我认为这种方法将涉及PHP代码来获取客户端数据（$_SERVER['USER_AGENT']）因为不希望图像太大而无法进入屏幕外，并且当使用智能手机时我不希望图像显示太小了，不能看到，这里我有屏幕分辨的问题：图像的像素可以是1200像素，但由于屏幕像素密度或分辨率，它显示得非常小。

Answer 1

现在最好的方法是使用一种名为＆＃34;响应图像尺寸的技术＆＃34;以及良好的旧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" />

在不同设备中显示图像的最佳方法是什么：CSS3或jQuery调整大小？

1 个答案: