2.9 KiB
2.9 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78b1367417b2b2512b09 | Make an Image Responsive | 0 | Сделать изображение отзывчивым |
Description
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