Как сделать картинку резиновой css

Для создания резиновой картинки в CSS можно использовать свойство background-size: cover вместе с background-image. Чтобы картика была резиновой, её размер должен изменяться пропорционально размеру контейнера. Для этого можно использовать проценты или значение auto. Например:

<div class="container">
  <div class="image"></div>
</div>

.container {
  width: 100%;
  height: 400px;
}

.image {
  background-image: url(https://source.unsplash.com/weekly?water);
  background-repeat: no-repeat;
  background-size: cover;
  height: inherit; /* наследует высоту родительского элемента */
}

В этом примере блок .container устанавливает размеры контейнера, в котором будет отображаться резиновая картинка. Блок .image устанавливает изображение в качестве фона и настраивает его как резиновое с использованием background-size: cover. Высота .image установлена, как inherit (наследованная от родительского блока), чтобы убедиться, что высота картинки соответствует высоте родительского блока.

Соответственно, если изменить размеры родительского блока .container, то картика будет соответствующим образом масштабироваться, сохраняя свои пропорции и оставаясь резиновой.