---
id: 587d78b1367417b2b2512b09
title: Make an Image Responsive
challengeType: 0
videoUrl: '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
```yml
tests:
- text: Your img
tag should have a max-width
set to 100%.
testString: assert(code.match(/max-width:\s*?100%;/g), 'Your img
tag should have a max-width
set to 100%.');
- text: Your img
tag should have a display
set to block.
testString: assert($('img').css('display') == 'block', 'Your img
tag should have a display
set to block.');
- text: Your img
tag should have a height
set to auto.
testString: assert(code.match(/height:\s*?auto;/g), 'Your img
tag should have a height
set to auto.');
```
## Challenge Seed
```html
```
## Solution
```js
// solution required
```