simongehrig.de/scss-grid
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added

Browse Source 
image fit

Enhanced
image cover
added aspect control
This commit is contained in:
Simon Gehrig
2017-04-05 09:24:14 +02:00
parent 4ae77bdc87
commit 426dde5b61
5 changed files with 128 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/layout/image/cover/cover.scss
+2 -2
View File
@@ -5,14 +5,14 @@
width: 25%;
margin: 0 -4px 0 0 !important;
@include image-cover(0.75);
@include image-fit();
}
.img-round {
width: 25%;
margin-right: -4px !important;
@include image-cover(1);
@include image-fit();
img {
border-radius: 50%;
examples/layout/image/fit/fit.html
+63
View File
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Camera</title>
<link type="text/css"
rel="stylesheet"
href="./fit.css">
</head>
<body>
<div class="content">
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-square">
<img class="landscape" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-square">
<img class="portrait" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
<div class="content">
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-round">
<img class="landscape" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-round">
<img class="portrait" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
<div class="content">
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/300/400/city/1">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/200/200/city/2">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/700/400/city/3">
</div>
<div class="img-wrapper">
<img class="" src="http://lorempixel.com/400/700/city/4">
</div>
</div>
</body>
</html>
examples/layout/image/fit/fit.scss
+24
View File
@@ -0,0 +1,24 @@
@import "../../../../framework";
.content {
.img-square {
@include cols(4,0);
margin: 0 -4px 0 0 !important;
border: solid thin black !important;
@include image-fit(0.75);
}
.img-round {
@include cols(4,0);
margin-right: -4px !important;
border: solid thin black !important;
@include image-fit(1);
img {
border-radius: 50%;
}
}
}
mixins/_00-mixins.scss
+1
View File
@@ -2,6 +2,7 @@
@import "layout/layout";
@import "layout/position";
@import "layout/image/cover";
@import "layout/image/fit";
@import "layout/menus/_00-menus";
// Queries
mixins/layout/image/_fit.scss
+38
View File
@@ -0,0 +1,38 @@
@mixin image-fit($heightaspect) {
/* image fit */
position: relative;
display: inline-block;
overflow: hidden;
text-align: center;
img {
position: absolute;
object-fit: fill !important;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
&.landscape {
min-width: 100%;
height: auto;
}
&.portrait {
min-height: 100%;
width: auto;
}
}
&:after {
content: "";
display: block;
padding-bottom: 100% * $heightaspect;
}
}