From 7ef54683fba9575c825cfc788939dddd829a1b28 Mon Sep 17 00:00:00 2001
From: Mibs <mibsmyrtr@gmail.com>
Date: Wed, 31 Oct 2018 03:34:49 -0300
Subject: [PATCH] [FEATURE] Add snippet to position and change dimensions of an
 <img> image (#119)

* Add snippet to position and change dimensions of an <img> image

* Update and rename img-position.md to fit-image-in-container.md

* Append date
---
 snippets/fit-image-in-container.md | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 snippets/fit-image-in-container.md

diff --git a/snippets/fit-image-in-container.md b/snippets/fit-image-in-container.md
new file mode 100644
index 000000000..a822c0bb4
--- /dev/null
+++ b/snippets/fit-image-in-container.md
@@ -0,0 +1,48 @@
+### Fit image in container
+
+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.
+
+#### HTML
+
+```html
+<img class="image image-contain" src="https://picsum.photos/600/200">
+<img class="image image-cover" src="https://picsum.photos/600/200">
+```
+
+#### CSS
+
+```css
+.image {
+  background: #34495e;
+  border: 1px solid #34495e;
+  width: 200px;
+  height: 200px;
+}
+
+.image-contain {
+  object-fit: contain;
+  object-position: center;
+}
+
+.image-cover {
+  object-fit: cover;
+  object-position: right top;
+}
+```
+
+#### Demo
+
+#### 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.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+- https://caniuse.com/#feat=object-fit
+
+<!-- tags: layout, visual -->
+<!-- date: 2018-10-31 -->