How to achieve that in css? - html

Question

I'm developping a page where the user can upload some images in my website.
The images the user can upload should have a specific size let's say : 800 x 600 px.
When the user uploads a different size for example : 900 x 500. This image should be rescaled (not proportionally) to 800 x 600.
Now I need the page to be responsive. Meaning that when the whole page is resized, the image region is should be resized proportionally this time.
For example, if the page is 50% the original size, the image region should be 400 x 300;
I have the following html
<div class="ImageRegion">
<img class="Image" src="whatever"/>
</div>
Can this be achieved using CSS only or should I use Javascript please ?
Cheers,

Answer 1

If I understood correctly, you probably can achieve want you want with something like that:
<img src="yourimage.png" class="whatever" />
And in CSS:
img.whatever {
display: inline-block;
max-width: 800px;
width: 100%
}

Answer 2

/* For width smaller than 400px: */
.ImageRegion {
background-repeat: no-repeat;
background-image: url('http://placehold.it/400x300');
width: 400px;
height: 300px;
}
/* For width 400px and larger: */
#media only screen and (min-width: 400px) {
.ImageRegion {
background-repeat: no-repeat;
background-image: url('http://placehold.it/800x600');
width: 800px;
height: 600px;
}
}
<h3>Resize the browser width and the background image will change at <mark>400px</mark>.</h3>
<div class="ImageRegion"></div>