fix(img): add object-fit to the host to avoid skewing the inner img

ionic-team · Aug 20, 2018 · 2e94227 · 2e94227
1 parent 059d365
commit 2e94227
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 1 deletion.
diff --git a/core/src/components/img/img.scss b/core/src/components/img/img.scss
@@ -1,6 +1,8 @@
 
 :host {
   display: block;
+
+  object-fit: contain;
 }
 
 img {

diff --git a/core/src/components/img/test/basic/index.html b/core/src/components/img/test/basic/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>Floating Action Button - Basic</title>
+  <title>Img - Basic</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
   <script src="/dist/ionic.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">

diff --git a/core/src/components/img/test/standalone/e2e.js b/core/src/components/img/test/standalone/e2e.js
@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/fab/test/basic?ionic:mode=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('fab/basic', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate('#content');
+    });
+  });
+});
diff --git a/core/src/components/img/test/standalone/index.html b/core/src/components/img/test/standalone/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Img - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
+</head>
+
+<body padding onLoad="render()">
+  <h2>Default</h2>
+  <ion-img src="https://i.ytimg.com/vi/rq6M3imPgW4/maxresdefault.jpg"></ion-img>
+
+  <h2>Custom Width</h2>
+  <ion-img class="custom-width" src="https://www.ericpetersautos.com/wp-content/uploads/2017/11/1961-Ferrari-250-GT-SWB-Berlinetta-by-Scaglietti_Erik-Fuller-c-2016-Courtesy-RM-Sothebys-1.jpg"></ion-img>
+
+  <h2>Custom Height</h2>
+  <ion-img class="custom-height" src="https://images.unsplash.com/photo-1521657142174-c7353dc830cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4e244f754794055f338bdfad9f8fdca7&auto=format&fit=crop&w=1951&q=80"></ion-img>
+
+  <h2>Custom Height / Fit</h2>
+  <ion-img class="custom-height-fit" src="https://images.unsplash.com/photo-1521657142174-c7353dc830cd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4e244f754794055f338bdfad9f8fdca7&auto=format&fit=crop&w=1951&q=80"></ion-img>
+
+  <h2>Grid of Images</h2>
+  <ion-grid id="imageGrid"></ion-grid>
+
+  <style>
+    .custom-width {
+      width: 300px;
+    }
+
+    .custom-height {
+      height: 100px;
+    }
+
+    .custom-height-fit {
+      height: 100px;
+      object-fit: cover;
+    }
+  </style>
+
+  <script>
+    let images = [];
+    for (var i = 0; i < 15; i++) {
+      images.push(i);
+    }
+    const grid = document.getElementById('imageGrid');
+
+    function render() {
+      let html = '';
+
+      for (let image of images) {
+        // First image, start the row
+        if (image % 5 === 0) {
+          html += '<ion-row>';
+        }
+
+        html += `
+          <ion-col>
+            ${image}
+            <ion-img src="https://picsum.photos/200?image=${image}">
+          </ion-col>
+        `;
+
+        // If this is the last image in the row end it
+        if ((image - 4) % 5 === 0) {
+          html += '</ion-row>';
+        }
+      }
+      grid.innerHTML = html;
+    }
+  </script>
+</body>
+
+</html>