CODEWITHSUNDEEP
jquerycssorientationscreen-orientation
Sander Schaeffer
Sander Schaeffer

Reputation: 2827

Image adapt to parent size, based upon device orientation

I've got a simple feature that has struggling me for a longer time necessary. Hopefully you guys can assist.

I'm creating a page on a web-app that contains a map of an area. The image itself is landscape and therefor is bigger than the device when it's held portrait, knowing the image is fullscreen.

To adapt to the useable area on the device, I've set the parent to overflow scroll, so the user can drag the image to see the whole image. Sort of like Google Maps :)

Now my issue: I want the image to adapt to the orientation of the device. And on such way that if

For that, I'm using the following 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'
    });
};
});

Now, if you check out this jsfiddle you can mostly experience this idea.. Although the code isn't that correct. Especially if you change the fiddle orientation (move height/width guides) from landscape back to portrait. Everytime you move anything, the image size get's increased..

So I'm looking for a suitable solution for my wishes. Who o who can help? :)

Upvotes: 0

Views: 325

Answers (2)

BA_Webimax
BA_Webimax

Reputation: 2679

As an alternative, you could just use media queries since you are only changing the styles being applied to the elements:

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

Upvotes: 1

Amin Jafari
Amin Jafari

Reputation: 7207

if you're using jQuery.mobile.js (which I'm 90% sure you are) then you can use the code below:

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

Upvotes: 1

Related Questions