<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Foto preview v_2</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
img {display: block;width: 100%;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}
html, body {width: 100%;height: 100%;}
</style>
</head>
<body>
<img src="gallery/60.jpg" alt="">
<script>
$(document).ready(function() {
function changeImgSize() {
var $win_width = $(window).width(),
$win_height = $(window).height(),
$img_preview = $("img"),
$img_width = $img_preview.width(),
$img_height = $img_preview.height();
if ($win_width < $win_height) {
elementFullWidth($img_preview);
} else if ($win_width > $win_height) {
elementFullHeight($img_preview);
}
}
function visibleElement(element) {element.css({"opacity":"1"});}
function invisibleElement(element) {element.css({"opacity":"0"});}
function elementFullHeight(element) {element.css({"width":"auto","height":"100" + "%"});}
function elementFullWidth(element) {element.css({"width":"100" + "%","height":"auto"});}
function elementAutoSize(element) {element.css({"width":"auto","height":"auto"});}
$(window).on("orientationchange", changeImgSize);
});
</script>
</body>
</html>
Вот пример кода
