HTML Document File : images.html

<title>dynamic images and CSS</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<input type=range min=10 max=50 value=40 id=slider1>
<img id=image1 src="lightning.jpeg" style="object-fit: contain; width: 40vw; height: 40vh; border: 1px solid black">
<br>

<input type=range min=10 max=50 value=20 id=slider2>
<img id=image2 src="lightning.jpeg" style="object-fit: cover; width: 20vw; height: 40vh; border: 1px solid black">
<br>

<script>
resize(slider1,image1)
resize(slider2,image2)
function resize(input,image){
	input.oninput = ()=>image.style.width=input.value+"vw"
}
</script>

<!-- mostra source code -->
<script src="show-source.js"></script>