ee1e8abd87
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
---
|
|
id: 587d78b1367417b2b2512b09
|
|
title: Make an Image Responsive
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/p/pzrPu4/cz763UD'
|
|
forumTopicId: 301140
|
|
dashedName: make-an-image-responsive
|
|
---
|
|
|
|
# --description--
|
|
|
|
Making images responsive with CSS is actually very simple. You just need to add these properties to an image:
|
|
|
|
```css
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
```
|
|
|
|
The `max-width` of `100%` will make sure the image is never wider than the container it is in, and the `height` of `auto` will make the image keep its original aspect ratio.
|
|
|
|
# --instructions--
|
|
|
|
Add the style rules to the `responsive-img` class to make it responsive. It should never be wider than its container (in this case, it's the preview window) and it should keep its original aspect ratio. After you have added your code, resize the preview to see how your images behave.
|
|
|
|
# --hints--
|
|
|
|
Your `responsive-img` class should have a `max-width` set to `100%`.
|
|
|
|
```js
|
|
assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
|
|
```
|
|
|
|
Your `responsive-img` class should have a `height` set to `auto`.
|
|
|
|
```js
|
|
assert(code.match(/height:\s*?auto;/g));
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<style>
|
|
.responsive-img {
|
|
|
|
|
|
}
|
|
|
|
img {
|
|
width: 600px;
|
|
}
|
|
</style>
|
|
|
|
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
|
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<style>
|
|
.responsive-img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
img {
|
|
width: 600px;
|
|
}
|
|
</style>
|
|
|
|
<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
|
<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
|
|
```
|