javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Brandy Carney
2018-08-20 11:35:48 -04:00
parent 059d3652d5
commit 2e94227675
4 changed files with 98 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/img/img.scss
View File

@ -1,6 +1,8 @@
:host {
display: block;
object-fit: contain;
}
img {

2
core/src/components/img/test/basic/index.html
View File

@ -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">

19
core/src/components/img/test/standalone/e2e.js Normal file
View File

@ -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');
});
});
});

76
core/src/components/img/test/standalone/index.html Normal file
View File

@ -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>