Image controls | Basic CSS solutions


IMG.center_block
display: block; ___ margin-left: auto; ___ margin-right: auto;
2021-11-30

Hardcoded in editor

Hardcoded in editor


< a href='/...jpg' class='popup' data-height='720' data-width='1040' data-scrollbars='0' >
< div class="ØfL1 p1" style="width:37%; break-inside:avoid; margin:4px;">
< img src="/wp-content/uploads/COVID1.jpg" alt="" width="100%" class="alignleft" />
< div class="Øsub4">Hardcoded in editor< /div>< /div >< /a>




< div class="ØfL7 sq-c pØ" style="width:90px; margin-right:4px;">
< img class="sq-img" src=" /wp-content/uploads/LEVE.jpg " class="aligncenter" / >< /div >
< div class="ØfL7 pØ" style="margin-right:4px;">
< img class="h90" src=" /wp-content/uploads/LAKE.jpg " class="aligncenter" / >< /div >

TABS


Square CSS S/O
< div class="ØfL7 style="width:80px; margin-right:4px;">
< img class="sq-img" src= " /wp-content/uploads/HYTTE.jpg" class=" aligncenter" / >< /div >

  • Stackoverflow.com > how-to-crop-a-rectangular-image-into-a-square-with-css


(Style * 1 * is in this page) 
.sq-c   {position:relative; width:100%;}
.sq-c::after   {content:""; display:block; padding-bottom:100%;}  /* xyz::after {content: "(=stuff or css added after xyz::)";} */
.sq-img   {position:absolute; width:100%; height:100%; object-fit:cover;}

.image-container {background-image: url('http://i.stack.imgur.com/GA6bB.png'); background-size:cover; background-repeat:no-repeat; width:250px; height:250px;}  
< div class = " image-container " > < / div > ‹-- (spaces very sensitive) 

Samples
Tab4
Success
Smaller
Center_block
IMG POPUP

< div style="width=100%; padding:35px; background-image:url(/wp-content/uploads/33.jpg);" >
< img class="center_block pw5" src="/wp-content/uploads/SAFARI_LOGO.png" alt="" width="30%" style="padding:10px;"/ >


< div style="margin:0px; padding:10px; background-image:url(/wp-content/uploads/CS4.jpg);" >< img class="center_block pw5" src="/wp-content/uploads/ticato_ny_dark.png" alt="" width="16%" style="padding:16px;"/>< /div >