2.2 KiB
2.2 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78b1367417b2b2512b09 | Make an Image Responsive | 0 | https://scrimba.com/p/pzrPu4/cz763UD |
Description
img { width: 720px; }
You can use:
img {The
max-width: 100%;
display: block;
height: auto;
}
max-width
property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the display
property to block changes the image from an inline element (its default), to a block element on its own line. The height
property of auto keeps the original aspect ratio of the image.
Instructions
img
tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio.
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), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');
- text: Your <code>img</code> tag should have a <code>display</code> set to block.
testString: assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');
- text: Your <code>img</code> tag should have a <code>height</code> set to 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