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