Question

您好我有一个问题是将图像置于另一个图像中心，以便在调整窗口大小时它会起作用。目前我已经将它放在更大的屏幕尺寸上，但是当它缩小到更小时它不会保持居中...... 见下面的屏幕和代码。

这是代码。对于HTML我使用bootstrap 3 Thumbnails组件：

<div class="row">
    <div class="col-lg-3 col-md-6">
        <div class="thumbnail">
            <img src="images/stone-1.png" id="stone-1" alt="Stone 1 | AmberCRO">
            <img src="images/notebook-streamline.png" id="s-pic-hover-1" class="s-pic-over" alt="AmberCRO">
            <div class="caption service-1">
                <h3>Preparation</h3>
                <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
            </div>
        </div>
    </div>
</div>

目前

和CSS

.thumbnail  {
    display: block;
    margin: 0;      
    border: 0 none;
    box-shadow: none;
}

.s-pic-over  {
    position: absolute;
    top: 20px;
    left: 142px;
}

我能做什么才能使书籍图像始终保持在所有窗口尺寸的石像上？

Answer 1

您需要将position: relative设置为.thumbnail，否则.s.pic-over将absolute设置为DOM中的第一个父级，在本例中为html，即＆＃{1}} 39;为什么在每个断点都没有好处

＆＃13;

.thumbnail {
  display: block;
  margin: 0;
  border: 0 none;
  box-shadow: none;
  position: relative;
  margin: auto;
}
.s-pic-over {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6">
      <div class="thumbnail">
        <img src="//placehold.it/300x300" id="stone-1" alt="Stone 1 | AmberCRO">
        <img src="//lorempixel.com/100/100" id="s-pic-hover-1" class="s-pic-over" alt="AmberCRO">
        <div class="caption service-1">
          <h3>Preparation</h3>
          <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

以下是我的建议：

.thumbnail {
 text-align:center;
 }
 #image-container
 {
 position:relative;
 width:100%;
 height:300px;
 }
 #stone-1
 { 
 position:absolute;
 z-index:10;
 margin:auto;
 left:0;
 right:0;
 }
 #s-pic-hover-1{
 z-index:9;
 position:absolute;
 margin:auto; 
 left: 0;
 right:0;
 }

我使用了图像容器div。

  <div class="row">
     <div class="col-lg-3 col-md-6">
        <div class="thumbnail">
           <div id="image-container">
              <img src="http://placehold.it/300x300" id="s-pic-hover-1" alt="Stone 1 | AmberCRO">
              <img src="http://lorempixel.com/100/100" id="stone-1" class="s-pic-over" alt="AmberCRO">
           </div>
           <div class="caption service-1">
              <h3>Preparation</h3>
              <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
           </div>
        </div>
     </div>
  </div>

CSS将图像置于图像上方

2 个答案: