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

Question

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

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

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

Answer 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
    }
}

Answer 2

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

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

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

http://adaptive-images.com/

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

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

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

Answer 3

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

$(document).ready(function() {

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

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

​</p>