Html 如何在css中实现这一点？

我正在开发一个页面，用户可以在我的网站上传一些图片

用户可以上传的图像应该有一个特定的大小，比如说：800x600像素

当用户上载不同大小的文件时，例如：900 x 500。此图像应重新缩放（不成比例）至800 x 600

现在我需要的网页是响应。这意味着当调整整个页面的大小时，此时图像区域的大小应按比例调整

例如，如果页面为原始大小的50%，则图像区域应为400 x 300

我有下面的html

  <div class="ImageRegion">
    <img class="Image" src="whatever"/>
  </div>

这可以只用CSS实现吗？还是我应该使用Javascript

---

干杯，

如果我理解正确，你可能可以通过这样的方式实现你想要的：

<img src="yourimage.png" class="whatever" />

/*对于小于400px的宽度：*/
.图像区域{
背景重复：无重复；
背景图像：url（'http://placehold.it/400x300');
宽度：400px；
高度：300px；
}
/*对于宽度为400px及更大的：*/
@仅介质屏幕和（最小宽度：400px）{
.图像区域{
背景重复：无重复；
背景图像：url（'http://placehold.it/800x600');
宽度：800px；
高度：600px；
}
}

调整浏览器宽度，背景图像将以400px的速度变化。

希望您至少尝试自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果你仍然有麻烦，用你的代码回来解释你所尝试的。“例如，如果页面是原始大小的50%”——你认为网站的“原始大小”是什么？通过调整大小，您是指更改可用视口还是缩放？

img.whatever {
   display: inline-block;
   max-width: 800px;
   width: 100%
}