Image's height same to Phone/Tablet height - only works properly in Chrome

Question

I am working on a portfolio site. I using responsive+adaptive design thanks to mobile_detect.php. The specific codes for desktop and handheld devices never meet with each other.

Please download for Chrome the "User-Agent Switcher for Chrome" extension: https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg

And for Firefox the "User Agent Switcher": https://addons.mozilla.org/hu/firefox/addon/user-agent-switcher/

(It's easier test in desktop and troubleshoot, than on mobile device. My website exactly looking the same in mobile-desktop Chrome and Firefox.)

HTML structure:

<div id="content">
 <div class="horgallery">
  <ul class="images">
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-001-1024px.jpg" alt="" /></li>
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-002-1024px.jpg" alt="" /></li>
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-003-1024px.jpg" alt="" /></li>
  </ul><!-- .images -->
 </div><!-- .horgallery -->
</div><!-- #content -->

js/scripts-mobile.js:

// Vertical image resize for Mobile/Tablet Window height
$(document).ready(function(){
function horgalleryImagesSize(all) {
    windowHeight = $(window).height();
    if (all) {
        $('.horgallery .images li').css({'max-height': windowHeight});
    }
}
$(document).ready(horgalleryImagesSize); // Trigger calculation
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
});

css/mobile.css:

.horgallery .images li { float: none; clear: both; display: block; position: relative; }
.horgallery .images img { float: none; max-width: 100%; max-height: 100%; }
.horgallery .images li { padding: 0 0 30px 0; text-align: center; }

The problem:

• The design only works in my taste in latest Chrome Desktop and Mobile.
• Firefox desktop and mobile showing the images with full screen width, but cutting out the image parts which is higher than screen height (javascript doing his job without problem).
• Android mobile browser seems resizing the images, but when finishis loading, the bottom padding disappear and vertical images overflow the neighbour ones.

I need that vertical images never be longer than the actual screen height.

Also I want swipe feature (swipe exactly in the center of the screen, in this case the images perfectly will cover vertically the screen height), but this is a problem for a later question).

I tested my site in Genymotion emulator with Android 4.3.

The other option would be to maintain images aspect ratio in real time and set their height to window height. But I'm not a JavaScript programmer and I don't know how to do it.

EDIT: Thanks to Santiago!

// Vertical image resize for Mobile/Tablet Window heigh
$(document).ready(function(){
screen.addEventListener("orientationchange", function horgalleryImagesSize(all) {
    windowHeight = $(window).height();
    if (all) {
        $('.horgallery .images li').css({'height': windowHeight});
    }
})
$(document).ready(horgalleryImagesSize); // Trigger calculation
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
});

Solves the issue in native Android browser. Chrome great. Firefox uses the full width of the window. Mobile Opera browsers: Bahh... I not have change to test in Safari. Is there any user-agent extension for desktop Safari?

Seems like I need to live with it that Firefox is a bad guy now.

EDIT2:

I don't know JavaScript. How can we calculate image's aspect ratios from width and height and resize to $(window).height()?

Answer 1

try replacing max height with height;

$('.horgallery .images li').css({'height': windowHeight});

also I dont think this is necesary:

$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME

edit

then you should play with CSS3 image attr as cover, contain, etc.

also to trigger a new

$('.horgallery .images li').css({'height': windowHeight});

each time orientation changes (I remember was onorientationchange event or very similar)