html - CSS for an image sitting inside a div within a lightbox (Many layers) -
i having issues getting head around dimensions of image sitting within div inside lightbox. break down:
1 light box 2 columns in lightbox named lhc , rhc image sits in lhc no matter if use % or px distorts thumb.
the image needs not distort regardless of original size needs scale down , sit dead centre of lhc div.
see code , going wrong:
.imagebox_container { height: 600px; width: 800px; } .fancybox-prev { width: 20%; } .fancybox-next { width: 20%; right: 400px; } .lhc { width: 500px; height: 100%; position: relative; float: left; display: block; background-color: #000; } .rhc { width: 300px; background-color: #fff; height: auto; position: relative; overflow-y: scroll; } .fancyimg{ height: 50%; width: 50%; display:block; margin:auto; margin-top: 25%;}
here html/php:
<div class="imagebox_container"> <div class="lhc"><img class="fancyimg" src="uploads/folio/<?php echo $imgdata['filename']; ?>" /></div> <div class="rhc"> <div id="imagedetails"> <div id="imagedetails_useravatar"></div> <div id="imagedetails_username"></div> </div> <hr /> <div id="likeboard"></div> <div id="commentboard"> <?php /* load comments */ ?> <?php while($row = mysqli_fetch_assoc($result_comments)){ ?> <div class="commentbox"><span class=""><span class="comment"><?php echo $row['comment']; ?></span></span></div> <hr />
hi playing around max-heights/widths little closer...
.fancyimg{ max-height: 50%; max-width: 50%; display:block; margin:auto; margin-top: 25%;}
Comments
Post a Comment