FSFE
/
fsfe-website
29
30
Fork 85
Code Issues 61 Pull Requests 15 Wiki Activity

introduce an image wrapper that makes non-square images square (1:1 ratio)

This commit is contained in:
Max Mehl 2021-07-09 16:14:09 +02:00
parent 9e2714e909
commit 4e1c859e7f
Signed by: max.mehl
GPG Key ID: 2704E4AB371E2E92
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
look/elements/text-img-structure.less
View File

@ -14,7 +14,8 @@
// takes 1/4 of the total width. On XS sized screens, it will go above the
// text.
> img:first-child,
> a:first-child img {
> a:first-child img,
> div.img-container {
display: block;
margin-top: 5px;
margin-bottom: 10px;
@ -33,12 +34,32 @@
}
// Optionally smaller image (2/10 ratio)
&.small-img > img:first-child {
&.small-img > img:first-child,
&.small-img > div.img-container {
.make-sm-column(2);
&.img-square {
padding-bottom: calc(100% / 6); // width of 2 cols
}
}
&.small-img > :nth-child(n+2) {
.make-sm-column(10);
}
// Square images, even if they are rectangular
> div.img-container {
&.img-square {
padding-bottom: calc(100% / 4); // width of 3 cols
> img {
position: absolute;
object-fit: cover;
object-position: center;
height: calc(100% - 30px); // bring down to correct size
width: calc(100% - 30px); // bring down to correct size
}
}
}
}
// Image on the left side of text
@ -57,7 +78,7 @@
.with-image();
// The image is pushed to the right side...
> img:first-child {
> img:first-child, > div.img-container {
.make-sm-column-push(9);
}
@ -72,7 +93,8 @@
}
// Optionally smaller image (2/10 ratio)
&.small-img > img:first-child {
&.small-img > img:first-child,
&.small-img > div.img-container {
.make-sm-column-push(10);
}
&.small-img > :nth-child(2) {