如何在移动设备上使用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.comadamdbradleyforesight.js。

http:/adaptive-images.com。

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

注: 有一点要说明的是：这是一个依赖于服务器的解决方案，应该只在PHP代码环境中使用。

...这里有一个jquery插件，用于同样的目的。https:/github.comtelejecthisrc。

Answer 3

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

$(document).ready(function() {

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

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