Question

我正在移动网站上工作，我有一个div＆amp;里面的图像是这样的：

<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'
    });
});

使用jQuery在移动设备上调整图像大小

3 个答案: