Как добиться этого в CSS?

Question

Я разрабатываю страницу, на которой пользователь может загрузить некоторые изображения на моем веб-сайте.

Изображения, которые пользователь может загрузить, должны иметь определенный размер, скажем: 800 x 600 px.

Когда пользователь загружает другой размер, например: 900 x 500. Это изображение должно быть изменено (не пропорционально) до 800 x 600.

Теперь мне нужно, чтобы страница была отзывчивой.Это означает, что при изменении размера всей страницы область изображения на этот раз должна быть пропорционально изменена.

Например, если размер страницы составляет 50% от исходного размера, область изображения должна быть 400 x 300;

У меня есть следующий html

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

Может ли это быть достигнуто с использованием только CSS или мне следует использовать Javascript, пожалуйста?

Cheers,

Answer 1

/* 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>

Answer 2

Если я правильно понял, вы, вероятно, можете достичь желаемого с помощью чего-то подобного:

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

И в CSS:

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