How to make an image center itself when size of the div is increased

I am struggling to fix an image to a popup window , My problem is the image is getting stretched to the whole div ,

The div where I am applying is getting the width and height from JQuery.
HTML

<div id="portfolio-detail" style="width: 745px; height: 655px; top: 22px; display: block;">
    <img class="portfolio-close" src="assets/images/cancel-button.png">
    <div class="viewimg" style="position:relative;display:block;width:100%;height:100%;margin-left:auto;margin-right:auto;margin:0 ;"> 
        <img class="folioimg" style="position:absolute;width:100%" data-foliothumb="1" src="assets/gallery_crop_1.jpg">---&gt;</div>
</div>

The CSS is something like this

.about-slider-container {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 25px;
  z-index: 100;
}

#portfolio-detail {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
}


Source: css

Leave a Reply