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

Для создания резинового блока в CSS можно использовать свойства max-width и min-width с единицами измерения в процентах. Например:

HTML:

<div class="block"></div>

CSS:

.block {
  width: 50%; /* начальная ширина блока */
  height: 200px;
  background-color: red;
  margin: 0 auto; /* чтобы блок был по центру */
  max-width: 800px; /* максимальная ширина блока */
  min-width: 200px; /* минимальная ширина блока */
}

Теперь блок будет менять свою ширину при изменении размеров экрана, но не выйдет за пределы максимальной и минимальной ширины. Если нужно, чтобы блок менял и высоту, можно использовать свойства max-height и min-height.