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

Revamp snippet descriptions

Browse Source
This commit is contained in:
Chalarangelo
2020-12-30 15:37:37 +02:00
parent 27bae0477f
commit 16a4e06e85
59 changed files with 341 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,11 +3,11 @@ title: Fit image in container
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.
Fits an positions an image appropriately inside its container while preserving its aspect ratio.
- `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.
- Use `object-fit: contain` to fit the entire image within the container while preserving its aspect ratio.
- Use `object-fit: cover` to fill the container with the image while preserving its aspect ratio.
- Use `object-position: center` to position the image at the center of the container.
```html
<img class="image image-contain" src="https://picsum.photos/600/200" />