html - 当div的大小增加时如何使图像居中

Question

我正在努力将图像固定到弹出窗口，我的问题是图像被拉伸(stretch)到整个 div，

我正在应用的 div 是从 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>

CSS 是这样的

.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;
}

Answer 1

尝试向您的 .about-slider-container 添加一个位置。

.about-slider-container {
  position: relative; //or something that suits you
  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;
}