jquery - 图像根据设备方向适应父尺寸

我有一个简单的功能，需要较长时间才能解决。希望你们能提供帮助。

我正在网络应用程序上创建一个包含区域地图的页面。图像本身是横向的，因此，在知道图像为全屏的情况下，它比手持肖像时的设备要大。

为了适应设备上的可用区域，我将父级设置为溢出滚动，因此用户可以拖动图像以查看整个图像。有点像谷歌地图:)

现在我的问题是：我希望图像适应设备的方向。并且以这种方式


设备保持为纵向：图像高度等于父代高度的100％，并且水平轴设置为overflow:scroll，因此您无法向上/向下滚动，但可以横向移动
设备保持横向：图像宽度等于父级宽度的100％，并且垂直轴设置为overflow: scroll，因此您可以向上/向下滚动，但不能横向滚动。


为此，我使用以下jQuery：

// Map equal size to parent space
$(window).on("load resize",function(e){
var docH = $(document).outerHeight(),
    docHPX = docH + 'px',
    docW = $(document).outerWidth(),
    docWPX = docW + 'px',
    navH = $('.nav').outerHeight() * 2,
    remH = docH - navH + 'px';
$('.plattegrond').css({
    'height': docHPX,
    'width': docWPX
});

if (docH > docW) {
    $('.plattegrond img').css({
        'height':           remH,
        'width':            "",
        'overflow-x':   'scroll',
        'overflow-y':   ""
    });
} else if (docW > docH) {
    $('.plattegrond img').css({
        'height':           "",
        'width':            docWPX,
        'overflow-x':   "",
        'overflow-y':   'scroll'
    });
};
});

现在，如果您查看this jsfiddle，您几乎可以体会到这种想法。尽管代码不是那么正确。尤其是当您将小提琴的方向（将高度/宽度辅助线）从横向更改为纵向时。每当您移动任何东西时，图像尺寸都会增加。

因此，我正在寻找适合自己愿望的解决方案。谁可以帮助您？ :)

最佳答案

如果您使用的是jQuery.mobile.js（我很确定您使用的是90.），则可以使用以下代码：

$(window).bind("orientationchange", function(){
    if(window.innerHeight<window.innerWidth){
        $('.plattegrond img').css({
            'width':$('.plattegrond').parent().width()+'px',
            'height':'auto',
            'overflow-x':'hidden',
            'overflow-y':'scroll'
        });
        }
    else{
        $('.plattegrond img').css({
            'height':$('.plattegrond').parent().height()+'px',
            'width':'auto',
            'overflow-x':'scroll',
            'overflow-y':'hidden'
        });
        }
    });

关于jquery - 图像根据设备方向适应父尺寸，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25271734/