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;}