freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.russian.md

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0	https://scrimba.com/p/pzrPu4/cz763UD	301140	Сделать изображение отзывчивым

Description

Создание изображений с учетом CSS очень просто. Вместо применения абсолютной ширины к элементу: img { width: 720px; } Вы можете использовать:

img {
max-width: 100%;
display: block;
высота: авто;
}

Свойство max-width 100% масштабирует изображение в соответствии с шириной его контейнера, но изображение не будет растягиваться шире его первоначальной ширины. Установка свойства display для блокировки изменяет изображение с встроенного элемента (по умолчанию) на элемент блока в его собственной строке. Свойство height автоматически сохраняет исходное соотношение сторон изображения.

Instructions

Добавьте правила стиля для тега img чтобы он реагировал на размер его контейнера. Он должен отображаться как элемент уровня блока, он должен соответствовать полной ширине его контейнера без растягивания, и он должен сохранять исходное соотношение сторон.

Tests

tests:
  - text: Your <code>img</code> tag should have a <code>max-width</code> set to 100%.
    testString: assert(code.match(/max-width:\s*?100%;/g));
  - text: Your <code>img</code> tag should have a <code>display</code> set to block.
    testString: assert($('img').css('display') == 'block');
  - text: Your <code>img</code> tag should have a <code>height</code> set to auto.
    testString: assert(code.match(/height:\s*?auto;/g));

Challenge Seed

<style>

</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">

Solution

<style>
 img {
   max-width: 100%;
   display: block;
   height: auto;
 }
</style>

<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">