css - Automatically resize image to fit on screen (without Javascript) - html

Question

So, I have an art website, with each work getting its own page. The works are mostly photos, meaning they have higher resolutions than most screens are capable of displaying - so they need to be resized down to scale, obviously.
To make works easier to look through, I display them such that they take up most of the screen (minus 100px in either dimension), scaling to fill whichever dimension is more limiting:
Work X is square-shaped, and on the average monitor it gets resized so that its height fills the entire vertical space, and its width scales accordingly - preserving the aspect ratio
Work Y is tapestry-shaped, and gets resized so that its width fills the entire horizontal space, and its vertical space gets resized to match that aspect ratio.
I'm currently using a straightforward Javascript script for this, calling a function on the img tag's onload (as well as whenever the window is resized) to calculate the desired width/height of the image and apply that. The problem with using Javascript for this is that there's a delay between when the image begins to load and when it resizes, which makes the page look really ugly for a while, especially when viewing the site on a poor internet connection.
Leading to my question: is there a way to resize images to a certain percentage of screen size, while preserving aspect ratio, in pure CSS?
This answer provides another Javascript solution, but I'd prefer to find a way to do this in pure CSS if possible.
My current script is this:
function setGoodHeight (element) {
if( on mobile ) {
...
}
else {
height_buffer = 100
width_buffer = 100
height_diff_pct = element.naturalHeight / window.innerHeight
width_diff_pct = element.naturalWidth / window.innerWidth
if(height_diff_pct > width_diff_pct) {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.height = window.innerHeight - height_buffer;
element.width = w * element.height / h;
}
else {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.width = window.innerWidth - width_buffer;
element.height = h * element.width / w;
}
if(element.width < 540) {
element.parentNode.setAttribute("style","width:" + 540 + "px");
}
else {
element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
}
}
}

Answer 1

Using the vw and vh units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width and max-height for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}

Answer 2

Tell your images to be at most 100% width of the container they are in, and height set to auto will maintain aspect ratio.
.my-image-class {
max-width: 100%;
height: auto;
}

Answer 3

How about using background-size: cover; for this?
Every image can be the background of a div, which in turn has the following properties set.
height
width
background-size: cover;
background: url('img.png') center center no-repeat;

Answer 4

JavaScript is the best answer but if you really want to only use css you can use percentages rather then px these will scale to a given container.
.img {
max-width:100%;
max-height:100%;
}
here is a similar question and answer: StackPost