---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: ''
localeTitle: Сделать изображение отзывчивым
---
## Description
Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: img { width: 720px; }
Вы можете использовать: img {
max-width: 100%;
display: block;
высота: авто;
}
Свойство max-width
100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства display
для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство height
автоматически сохраняет исходное соотношение сторон изображения.
## Instructions
Добавьте правила стиля для тега img
чтобы он реагировал на размер его контейнера. Он должен отображаться как элемент уровня блока, он должен соответствовать полной ширине его контейнера без растягивания, и он должен сохранять исходное соотношение сторон.
## Tests
```yml
tests:
- text: Ваш тег img
должен иметь max-width
равную 100%.
testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your img
tag should have a max-width
set to 100%.");'
- text: Ваш тег img
должен иметь установленный для display
.
testString: 'assert($("img").css("display") == "block", "Your img
tag should have a display
set to block.");'
- text: Ваш тег img
должен иметь height
установленную в auto.
testString: 'assert(code.match(/height:\s*?auto;/g), "Your img
tag should have a height
set to auto.");'
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```