Fitting image within wrapper using overflow:hidden (CSS/ HTML/ PHP) -
i have directory full of product images. trying display each image 150px
x150px
without distorting image , place border around product code (which image name) , image itself. looks now:
i image , product code sit @ bottom of border, having issues because noob , using overflow:hidden
. center image other two.
here php
code (using php
because need access sql
later):
<php $dir = "/some/location/"; if ($opendir = opendir($dir)){ while(($file= readdir($opendir))!== false){ if($file!="."&&$file!=".."){ echo('<div class = "image" > '); echo "<img src='/some/location/$file'><br>"; $sku = substr($file,0,-4); echo("<p>"); echo($sku); echo("</p>"); echo("</div>");} } } ?>
css
code:
<style> div.image { display: inline-block; height: 170px; width: 170px; border-style: solid; border-color: green; overflow: hidden; margin: 10px auto; margin-left: 10px; margin-right: 10px; } div.image img { max-height: 135px; max-width: 135px; padding-left: 25px; padding-right: 25px; } </style>
set position: relative;
outer (wrapper container, borders). wrap image , text beneath in div , set it's css this:
.image-wrap { position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); width: auto; height: auto; }
it should job you.
Comments
Post a Comment