如何使用 jQuery 在移动设备上调整图像大小？答案

【问题标题】：How to resize image on mobile devices using jQuery?如何使用 jQuery 在移动设备上调整图像大小？
【发布时间】：2012-12-10 04:03:56
【问题描述】：

我正在开发一个移动网站，其中有一个 div 和图像，如下所示：

<div id="wrapper">
    <div id="content">My img tag here</div>
</div>

我想知道，如何在任何手机/平板电脑上调整图像大小，而不用担心其分辨率、大小或方向。在这里，我正在寻找基于上述场景的最佳解决方案。

【问题讨论】：

标签： jquery mobile-website

【解决方案1】：

您可以根据方向使用媒体查询来赋予 CSS 属性：

@media screen and (orientation:portrait) {
    img {
        // css attributes
    }
}

@media screen and (orientation:landscape) {
    img {
        // css attributes
    }
}

或者你可以为屏幕宽度做：

@media screen and (max-width: 500px) {
    img {
        // css attributes
    }
}

【讨论】：

【解决方案2】：

上述技术是最普遍的，但据我了解，所需的解决方案不应依赖于设备尺寸、屏幕分辨率或方向。

我只提到了两个聪明的解决方案，它们都没有在 CSS 上完成这项工作：

https://github.com/adamdbradley/foresight.js

http://adaptive-images.com/

第二种解决方案很聪明，因为它捕获访问者设备的屏幕分辨率，自动创建缓存并提供最合适的嵌入 html <img> 标记的图像大小。

注意：不过需要提一下：这是依赖于服务器的解决方案，只能在 PHP 代码环境中使用。

...这是一个用于相同目的的 jquery 插件： https://github.com/teleject/hisrc

【讨论】：

【解决方案3】：

我找到了一个使用 jquery 的简单解决方案....

$(document).ready(function() {

    $width = $('#content').width();

    $('#content img').css({
        'max-width': $width,
        'height': 'auto'
    });
});

【讨论】：

但这会改变图像的分辨率，我想我正在尝试一些事情，比如这张图片在纵向模式下看起来不太好