IMAGE 2 Fundamentals
CSS Solutions
Reference guide for Square Image, Crop and height controled image sizes
2021-11-29

div class=ØfL7
img class=h90
div class=ØfL7
img class=h90
div class=ØfL7 sq-c style=width:90px
img class=sq-img
Better sol°: border OK
div class=ØfL7 crop90 style=width:90px
img class=c90
Extends if border added to imgage div: NotOK
div class=”sq-c pØb” style=”width:10%”>
img class=”sq-img” src=” …/LEVE.jpg” / >
article class=”ØfL7″ style=”width:10%
div class=”sq-c pØb” img class=”sq-img”
.sq-c {position:relative; width:100%;}
.sq-c::after {content:””; display:block; padding-bottom:100%;}
.sq-img {position:absolute; width:100%; height:100%; object-fit:cover;}
img.h90 {width:auto; height:90px; object-fit:cover;}

LGC Grid Columns
u1 Shortcode
u1 Shortcode

Logo overlay image:
IMG.center_block {display:block; margin-left:auto; margin-right:auto; padding:6px 8px 12px 8px;}