freeCodeCamp

2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78b1367417b2b2512b09	Make an Image Responsive	0		Сделать изображение отзывчивым

Description

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

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

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

Instructions

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

Tests

tests:
  - text: Ваш тег <code>img</code> должен иметь <code>max-width</code> равную 100%.
    testString: 'assert(code.match(/max-width:\s*?100%;/g), "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.");'
  - text: Ваш тег <code>img</code> должен иметь установленный для <code>display</code> .
    testString: 'assert($("img").css("display") == "block", "Your <code>img</code> tag should have a <code>display</code> set to block.");'
  - text: Ваш тег <code>img</code> должен иметь <code>height</code> установленную в auto.
    testString: 'assert(code.match(/height:\s*?auto;/g), "Your <code>img</code> tag should have a <code>height</code> set to auto.");'

Challenge Seed

<style>

</style>

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

Solution

// solution required

2.9 KiB Raw Blame History Unescape Escape