Skip to content

Added the object-fit tip to the readme #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Added the object-fit tip to the readme #38

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ A collection of tips to help take your CSS skills pro.
1. [Style "Default" Links](#style-default-links)
1. [Consistent Vertical Rhythm](#consistent-vertical-rhythm)
1. [Intrinsic Ratio Boxes](#intrinsic-ratio-boxes)

1. [Easily Fit an Image Inside Its Container](#easily-fit-an-image-inside-its-container)

### Use `:not()` to Apply/Unapply Borders on Navigation

Expand Down Expand Up @@ -120,7 +120,7 @@ Use the `:not()` pseudo-class so no comma is added to the last item.

### Select Items Using Negative `nth-child`

Use negative `nth-child` in CSS to select items 1 through n.
Use negative `nth-child` in CSS to select items 1 through n.

```css
li {
Expand Down Expand Up @@ -198,7 +198,7 @@ Implement CSS-only sliders using `max-height` with overflow hidden:
}
```

The element expands to the `max-height` value on hover and the slider displays as a result of the overflow.
The element expands to the `max-height` value on hover and the slider displays as a result of the overflow.


### Inherit `box-sizing`
Expand Down Expand Up @@ -252,7 +252,7 @@ Now column gutters always appear evenly-spaced.

### Use Attribute Selectors with Empty Links

Display links when the `<a>` element has no text value but the `href` attribute has a link:
Display links when the `<a>` element has no text value but the `href` attribute has a link:

```css
a[href^="http"]:empty::before {
Expand Down Expand Up @@ -302,7 +302,7 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
}

.container div {
border: 2px dashed #ddd;
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
Expand All @@ -314,6 +314,24 @@ To create a box with an intrinsic ratio, all you need to do is apply top or bott
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).


### Easily Fit an Image Inside Its Container

You can easily specify how an image (or video) is fitted inside its container by assigning the `object-fit` property to the element itself:

```css
.img {
object-fit: cover;
}
```
and the even reposition it thanks to the `object-position` property!

Supported values are :
* `cover` fills image into the parent element so it's fully covered and contains aspect-ratio.
* `contain` fills image into the parent element so the object is fully shown.
* `fill` fills image into the parent element so it's fully covered and shrinks image, not respecting aspect-ratio.

Beware of [browser compatibility](http://caniuse.com/#search=object-position), this one is tricky: only Firefox and Chrome have native support!

## Support

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.