andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
snippets/fit-image-in-container.md
View File

@ -5,6 +5,10 @@ tags: layout,visual,intermediate
Changes the fit and position of an image within its container while preserving its aspect ratio. Previously only possible using a background image and the `background-size` property.
- `object-fit: contain` fits the entire image within the container while preserving its aspect ratio.
- `object-fit: cover` fills the container with the image while preserving its aspect ratio.
- `object-position: [x] [y]` positions the image within the container.
```html
<img class="image image-contain" src="https://picsum.photos/600/200" />
<img class="image image-cover" src="https://picsum.photos/600/200" />
@ -28,9 +32,3 @@ Changes the fit and position of an image within its container while preserving i
object-position: right top;
}
```
#### Explanation
- `object-fit: contain` fits the entire image within the container while preserving its aspect ratio.
- `object-fit: cover` fills the container with the image while preserving its aspect ratio.
- `object-position: [x] [y]` positions the image within the container.