diff --git a/examples/layout/image/cover/cover.scss b/examples/layout/image/cover/cover.scss index 0c522fe..1732a9f 100644 --- a/examples/layout/image/cover/cover.scss +++ b/examples/layout/image/cover/cover.scss @@ -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%; diff --git a/examples/layout/image/fit/fit.html b/examples/layout/image/fit/fit.html new file mode 100644 index 0000000..3c78dc5 --- /dev/null +++ b/examples/layout/image/fit/fit.html @@ -0,0 +1,63 @@ + + + + + Camera + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/examples/layout/image/fit/fit.scss b/examples/layout/image/fit/fit.scss new file mode 100644 index 0000000..d3485a8 --- /dev/null +++ b/examples/layout/image/fit/fit.scss @@ -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%; + } + } +} \ No newline at end of file diff --git a/mixins/_00-mixins.scss b/mixins/_00-mixins.scss index 9b53068..bd3a52d 100644 --- a/mixins/_00-mixins.scss +++ b/mixins/_00-mixins.scss @@ -2,6 +2,7 @@ @import "layout/layout"; @import "layout/position"; @import "layout/image/cover"; +@import "layout/image/fit"; @import "layout/menus/_00-menus"; // Queries diff --git a/mixins/layout/image/_fit.scss b/mixins/layout/image/_fit.scss new file mode 100644 index 0000000..7bea4bf --- /dev/null +++ b/mixins/layout/image/_fit.scss @@ -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; + } +} \ No newline at end of file