freeCodeCamp

2.2 KiB

Raw Blame History

id	title	challengeType	videoUrl
587d78b1367417b2b2512b09	Make an Image Responsive	0	https://scrimba.com/p/pzrPu4/cz763UD

Description

Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element: img { width: 720px; } You can use:

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

The 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

Add style rules for the 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

2.2 KiB Raw Blame History