html - 即使最大高度设置为 100%，当我旋转手机时图像也不能很好地缩放

Question

所以在另一篇文章中，我被建议使用 max-height:100% 但它没有帮助，当我旋转我的 Galaxy S4 并进入横向模式时，高度没有缩放得很好，尽管整个高度我只看到了图像的一部分。还有其他解决方案吗？

<meta content="width=device-width, initial-scale=1" name="viewport" />
<p align="center"><img src="https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_00pfOKSXTudGqfb" style="height: 470px;" /></p>
<style type="text/css">/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    img { max-width: 100%; }
}
/* samsung */
@media only screen and (min-device-width : 320px) and (max-device-width : 321px) {
    img { max-width: 100%; }
}


@media only screen 
and (min-width : 321px) {
img { max-width: 100%; max-height: 100%;}

}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
img {max-width: 100%;  }
}
</style>

这是我水平旋转手机时看到的(横向模式)

我使用了以下 jQuery，但是当我翻转手机时，它就像显示了 90(或 80)% 的图像。知道如何解决这个问题吗？这是 jQuery 代码: http://jsfiddle.net/7dVKz/5/这是我看到的:

Answer 1

使用 JS(尤其是 jQuery)的一种方法是监听窗口调整大小 $(window).resize() 然后调整图像的大小以适应屏幕。

我在为移动设备构建 Web 画廊时使用了这种方法。我找不到更好的方法来仅使用 CSS...

编辑:计算图像的高度和宽度:

var $img = $('your image selector here');
$img.css({
    maxWidth : $(window).width(),
    maxHeight : $(window).height()
});
// This is set in a different command because of the dependencies with the properties above.
// Do not merge these together.
$img.css({
    marginLeft : $img.width() / (-2),
    top: ($(window).height() - $img.height()) / 2
})