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

Question

我有这样的布局：

    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

Answer 1

只需添加显示：内联块到链接元素

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