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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d78b1367417b2b2512b09	Зробити адаптивне зображення	0	301140	make-an-image-responsive

--description--

Створення адаптивних зображень із CSS насправді дуже просто. Вам просто потрібно додати ці властивості до зображення:

img {
  max-width: 100%;
  height: auto;
}

max-width в 100% гарантує, що зображення не буде ширше, аніж контейнер, в якому воно знаходиться, а height auto збереже вихідне співвідношення сторін зображення.

--instructions--

Додайте правила стилю до класу responsive-img, щоб зробити його адаптивним. Він ніколи не повинен бути ширшим за контейнер (в цьому випадку це вікно попереднього перегляду) та зберігати вихідне співвідношення сторін. Після додавання коду, змініть розмір вікна попереднього перегляду, щоб подивитись як ведуть себе ваші зображення.

--hints--

Клас responsive-img повинен мати max-width встановлений на 100%.

assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');

Клас responsive-img повинен мати height встановлений на auto.

assert(code.match(/height:\s*?auto;/g));

--seed--

--seed-contents--

<style>
.responsive-img {


}

img {
  width: 600px;
}
</style>

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

--solutions--

<style>
.responsive-img {
  max-width: 100%;
  height: auto;
}

img {
  width: 600px;
}
</style>

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