如何使绝对定位的元素与另一个元素具有相同的大小答案

【问题标题】：How to make an absolutely positioned element have the same size as another element如何使绝对定位的元素与另一个元素具有相同的大小
【发布时间】：2018-07-07 20:27:03
【问题描述】：

我有这样的布局：

    body {
      text-align: center;
    }
    
    .link {
      position: relative;
    }
    
    .info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        background-color: #263238;
        color: #1DE9B6;
        opacity: 0;
        visibility: hidden;
      }
      
      .link:hover .info {
        opacity: 1;
        visibility: visible;
      }
    
    .col-md-3 {
      margin-bottom: 30px;
    }

   <div class="container">
      <div class="row">
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="link">
            <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
            <div class="info">Info</div>
          </div>
        </div>
      </div>
    </div>

当布局变小，只有一列水平显示时，应该在悬停时显示的 div 与列一样大，但我只希望它与流体图像一样大。我需要如何实现这一目标？

这里是codepen链接：https://codepen.io/Kestvir/pen/gKVwLe

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

只需将 display: inline-block 添加到链接元素

.link {
  position: relative;
  display: inline-block;
}

或者您也可以在 .link 元素上添加 d-inline-block position-relative 类。

body {
  text-align: center;
}

.link {
  position: relative;
  display: inline-block;
}

.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #263238;
    color: #1DE9B6;
    opacity: 0;
    visibility: hidden;
  }
  
  .link:hover .info {
    opacity: 1;
    visibility: visible;
  }

.col-md-3 {
  margin-bottom: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="link">
        <img class="img-fluid" src="http://image.tmdb.org/t/p/w300/c9XxwwhPHdaImA2f1WEfEsbhaFB.jpg" alt="img">
        <div class="info">Info</div>
      </div>
    </div>
  </div>
</div>

【讨论】：