Skip to content

Commit 1ecbe94

Browse files
Elchi3Elchi3
committed
Merge https://github.com/mdn/object-fit-basics into this repo. Original code by @chrisdavidmills 
2 parents 6873e71 + 3221b66 commit 1ecbe94

File tree

5 files changed

+146
-0
lines changed

5 files changed

+146
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,6 @@ The "counter-style-demo" directory contains a demo for the [@counter-style docum
66

77
The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples.
88

9+
The "object-fit-basics" directory contains a simple page demonstrating typical usage of different <code>object-fit</code> and <code>object-position</code> values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/).
10+
911
The "object-fit-gallery" directory contains a fun image gallery that uses <code>object-fit</code> to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/).

‎object-fit-basics/flowers.jpg

180 KB
Loading

‎object-fit-basics/index.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6+
<meta name="viewport" content="width=device-width">
7+
8+
<title>Object-fit basics</title>
9+
10+
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>
11+
<link rel="stylesheet" href="style.css">
12+
<!--[if lt IE 9]>
13+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
14+
<![endif]-->
15+
</head>
16+
17+
<body>
18+
<h1>Object fit basics</h1>
19+
20+
<p>This page illustrates different object-fit settings. It is part of the <a href="http://hacks.mozilla.org/2015/01/exploring-object-fit/">Exploring object-fit</a> Mozilla Hacks post. For the following examples to work, you'll need to be using a fairly new browser — Firefox 36+, Chrome 31+, Opera 26+ or Safari 8+. The latter supports <code>object-fit</code>, but not <code>object-position</code>.</p>
21+
22+
<h2 id="contain">object-fit: contain</h2>
23+
24+
<p>with <code>object-fit: contain</code>, the image is letterboxed inside the image element, retaining its aspect ratio.</p>
25+
26+
<img src="flowers.jpg" class="contain" alt="with object-fit contain, the image is trapped inside the image element, retaining aspect ratio.">
27+
28+
<h2 id="cover">object-fit: cover</h2>
29+
30+
<p>with <code>object-fit: cover</code>, the image completely covers the image element — it is shown completely along the shortest dimension, and will be cut off in the other direction.</p>
31+
32+
<img src="flowers.jpg" class="cover" alt="with object-fit cover, the image completely covers the image element and is cropped along the longest dimension">
33+
34+
<h2 id="fill">object-fit: fill</h2>
35+
36+
<p><code>Object-fill: fill</code> can override a video’s intrinsic aspect ratio, forcing it to completely fill the <code>&lt;video&gt;</code> element. This is good for correcting videos with broken aspect ratios.</p>
37+
38+
<video controls="controls" src="windowsill.webm"
39+
width="426" height="240" class="fill">
40+
<p>HTML5 video not supported?</p>
41+
</video>
42+
43+
<p><button>Turn object-fit: fill off</button></p>
44+
45+
<h2 id="none">object-fit: none</h2>
46+
47+
<p>Combining <code>object-fit</code> and <code>object-position</code> with CSS transitions can lead to some pretty interesting effects for image or video galleries.</p>
48+
49+
<img src="flowers.jpg" class="none" alt="when hovered over the image element expands to reveal more of the image" tabindex="0">
50+
51+
<h2 id="position">object-position</h2>
52+
53+
<p>The three images below have <code>object-fit: cover</code>, and three different <code>object-position</code> values set on them: <code>0 0</code>, <code>bottom</code>, and <code>100px 100px</code> respectively.</p>
54+
55+
<img src="flowers.jpg" class="objpos pos1" alt="when hovered over the image element expands to reveal more of the image">
56+
57+
<img src="flowers.jpg" class="objpos pos2" alt="when hovered over the image element expands to reveal more of the image">
58+
59+
<img src="flowers.jpg" class="objpos pos3" alt="when hovered over the image element expands to reveal more of the image">
60+
61+
62+
</body>
63+
<script>
64+
var button = document.querySelector('button');
65+
var video = document.querySelector('video');
66+
button.onclick = function() {
67+
if(video.className === 'fill') {
68+
video.className = '';
69+
button.textContent = 'Turn object-fit: fill on';
70+
} else {
71+
video.className = 'fill';
72+
button.textContent = 'Turn object-fit: fill off';
73+
}
74+
}
75+
</script>
76+
</html>

‎object-fit-basics/style.css

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
html {
2+
font-family: 'Open Sans Condensed', sans-serif;
3+
}
4+
5+
body {
6+
width: 70%;
7+
max-width: 800px;
8+
margin: 0 auto;
9+
}
10+
11+
img {
12+
width: 480px;
13+
height: 320px;
14+
background: gray;
15+
border: 2px solid black;
16+
display: block;
17+
margin: 0 auto;
18+
}
19+
20+
video {
21+
margin: 0 auto;
22+
display: block;
23+
border: 2px solid black;
24+
}
25+
26+
.contain {
27+
object-fit: contain;
28+
}
29+
30+
.cover {
31+
object-fit: cover;
32+
}
33+
34+
.fill {
35+
object-fit: fill;
36+
}
37+
38+
.none {
39+
width: 200px;
40+
height: 200px;
41+
42+
overflow: hidden;
43+
object-fit: none;
44+
object-position: 25% 50%;
45+
transition: 1s width, 1s height;
46+
}
47+
48+
.none:hover, .none:focus {
49+
height: 350px;
50+
width: 350px;
51+
}
52+
53+
.objpos {
54+
object-fit: cover;
55+
margin-bottom: 10px;
56+
}
57+
58+
.pos1 {
59+
object-position: 0 0;
60+
}
61+
62+
.pos2 {
63+
object-position: bottom;
64+
}
65+
66+
.pos3 {
67+
object-position: 100px 100px;
68+
}

‎object-fit-basics/windowsill.webm

996 KB
Binary file not shown.

0 commit comments

Comments
 (0)