"css image object"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>CSS object-fit</h1>
<section id="plain">
<h1>original images</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
</section>
<section>
<h1>Base style: <code>img { width: 200px; height: 200px; border: 1px solid; background: #eee; }</code></h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
<h2>Images squished</h2>
</section>
<section class="contain">
<h1>Base style + <code>img { object-fit: contain }</code></h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
<h2>Images letterboxed, correct aspect ratio maintained</h2>
</section>
<section class="cover">
<h1>Base style + <code>img { object-fit: cover; }</code></h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
<h2>Images expand to cover width and height, correct aspect ratio maintained</h2>
</section>
<section class="none">
<h1>Base style + <code>img { object-fit: none; }</code></h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
font-family: Avenir, sans-serif;
margin: 0;
text-align: center; }
h1, h2 { font-weight: 100; }
section:nth-child(even) {
background: #ccc;
}
#plain img {
width: 45%;
max-width: 300px;
height: auto;
margin: 2.5%;
}
section h1 {
font-weight: 600;
padding-top: 3rem;
}
code { font-family: inherit; font-weight: 100; }
section img {
width: 200px;
height: 200px;
border: 1px solid;
background: #eee;
}
section.contain img {
object-fit: contain;
}
section.cover img {
object-fit: cover;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Gaia Bootstrap Template
Image Crop jQuery
Image Checkbox
masonry Image Gallery

Questions / Comments: