1494a50123
* fix: restructure certifications guide articles * fix: added 3 dashes line before prob expl * fix: added 3 dashes line before hints * fix: added 3 dashes line before solutions
28 lines
540 B
Markdown
28 lines
540 B
Markdown
---
|
|
title: Make an Image Responsive
|
|
---
|
|
# Make an Image Responsive
|
|
|
|
|
|
---
|
|
## Solutions
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
|
|
|
Following the 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.
|
|
|
|
the style becomes:
|
|
|
|
```css
|
|
<style>
|
|
img {
|
|
max-width: 100%;
|
|
display: block;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
```
|
|
|
|
</details> |