Question

我有一个简单的功能，让我在更长的时间内挣扎。希望你们能协助。

我在包含区域地图的网络应用上创建了一个页面。图像本身是风景，因此当它保持肖像时，它比设备更大，因为知道图像是全屏的。

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

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

设备保持纵向：图像高度 100％等于父高度，水平轴设置为{{1所以你不能向上/向下滚动，但可以横向移动
设备保持格局：图像宽度 100％等于父宽度，垂直轴设置为{{ 1}}，所以你可以向上/向下滚动，但不能向侧面滚动。

为此，我使用以下jQuery：

overflow:scroll

现在，如果你查看this jsfiddle，你几乎可以体验到这个想法。虽然代码不正确。特别是如果您将小提琴方向（移动高度/宽度指南）从横向更改为纵向。每次移动任何东西时，图像尺寸都会增加..

所以我正在为我的愿望寻找合适的解决方案。谁可以帮忙？：）

Answer 1

如果您正在使用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'
        });
        }
    });

Answer 2

作为替代方案，您可以使用媒体查询，因为您只是更改应用于元素的样式：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.plattegrond img {
    width: auto;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 768px) 
and (orientation : landscape) {
.plattegrond img {
    width: 100%;
    height: auto;
    overflow-x: scroll;
    overflow-y: hidden;
}

图像根据设备方向适应父级大小

2 个答案: