Scaling images with multiple constraints on width and height - html

Question

I have a simple website / html-page that should show one image and some buttons. But the image size should follow the following rules:
the shorter side of the images should not be shown as more than 600 pixel
the image height should be max 80% of the window to allow space for UI without need to scroll
the image width should be up to 100% of the window
the image should not be shown in an increased size
the image's aspect ratio should not change
Regarding the rule with the shorter size: With shorter size, I mean either the height or the width of the image in pixel, depending which is smaller in number. So if an image is 2000x1200 it should be shown in 1000x600, so that the shorter size is 600. But also an image with 1200x88888 would be shown to 600x44444 pixel.
Here is what I tried. I resized all the images, so that their shorter size is 600 pixel or shorter. But the images are still diverse, an image could be 3000x600 but also 100x3000 or 100x100.
And in the code I tried:
<div style="max-height: 80%">
<img style="margin: 0px auto; display: block; height: 100%;" src="http://www.dummyimage.com/800x200/000/fff&text=image">
</div>
but this does not work for me, as the image is increased in size if the 80% window height is larger than the image.
Here a fiddle with 30%, instead of 80% to make it better visible:http://jsfiddle.net/ErNeT/2723/

Answer 1

It is probably impossible to determine if an image is portrait or landscape without JavaScript (to determine shorter side). So:
$(window).on("load", function() {
$("img").each(function() {
if (this.naturalWidth >= this.naturalHeight) {
$(this).addClass("landscape");
} else {
$(this).addClass("portrait");
}
});
});
body {
margin: 0;
}
.demo {
position: relative;
height: 100vh;
background-color: peachpuff;
}
.demo:nth-of-type(even) {
background-color: papayawhip;
}
.demo::before {
position: absolute;
content: attr(title);
}
/* style used on page load */
img {
max-width: 100vw;
max-height: 80vh;
}
/* classes added by JavaScript */
img.landscape {
max-width: 100vw;
max-height: 600px;
}
img.portrait {
max-width: 600px;
max-height: 80vh;
}
/* 600px is greater than 80vh for screen shorter then 750px so... */
#media screen and (max-height: 750px) {
img.landscape {
max-height: 80vh;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo" title="Shorter side test (landscape)">
<img src="http://www.dummyimage.com/1000x700/ccc/000"></div>
<div class="demo" title="Shorter side test (portrait)">
<img src="http://www.dummyimage.com/700x1000/ccc/000"></div>
<div class="demo" title="Viewport width and height test">
<img src="http://www.dummyimage.com/2400x2400/ccc/000"></div>
<div class="demo" title="No stretch test">
<img src="http://www.dummyimage.com/200x200/ccc/000"></div>

Answer 2

take look here https://www.w3schools.com/howto/howto_css_image_responsive.asp for a responsive image with just css or use an picture meta tag, in that way you can see this too https://css-tricks.com/responsive-images-css/
<picture>
<source srcset="extralarge.jpg" media="(min-width: 1000px)">
<source srcset="large.jpg" media="(min-width: 800px)">
<img srcset="medium.jpg" alt="…">
</picture>