Fitting image within wrapper using overflow:hidden (CSS/ HTML/ PHP) -


i have directory full of product images. trying display each image 150pxx150px without distorting image , place border around product code (which image name) , image itself. looks now: enter image description here

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

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -