如何让图像在悬停时填充整个div？

Question

当我悬停它时，我想要一个图像显示在div上。我使用的代码使图像比div更大，我如何才能将其包含到div大小的填充中而不泄漏？

下面是CSS代码：

  img{
    display: none;
    max-height: 50vh;
  }
  .effect:hover .text{
    display: none;
  }
  .effect:hover img{
    display: block;
  }

下面是HTML代码：

        <div class="row">
          <div class="col-lg-3 alternate_2 effect">
            <h1 class="display-6 text">Studio Griot</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 effect">
            <h1 class="display-6 text">Web Development</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 alternate_2 effect">
            <h1 class="display-6 text">Data Visualisation</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
          <div class="col-lg-3 effect">
            <h1 class="display-6 text">Incrediminds</h1>
            <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
            <a href="#">
                <img src="images/Shalaj.JPG"/>
            </a>
          </div>
        </div>

谢谢你的帮助

Answer 1

使用OP实际需要的内容进行编辑。

这张图片在没有拉伸的情况下占据了整个图片的宽度和高度。您可以使用object-fit: cover

有关object-fit的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

​

img {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>

​

将width: 100%添加到img。这将使它保持其父对象的100%宽度。我将引导标记更改为col-sm，以便您可以在运行代码片段时看到它。

为将来的访问者添加了以下信息：

除非您指定img并确保其为display: block，否则img将始终显示为与其默认/本机大小相同的大小，因为默认情况下img为inline。

​

img {
  display: none;
  width: 100%;
}

.effect:hover .text {
  display: none;
}

.effect:hover img {
  display: block;
}

h1.text {
  font-size: 14px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Studio Griot</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Web Development</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 alternate_2 effect">
    <h1 class="display-6 text">Data Visualisation</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
  <div class="col-sm-3 effect">
    <h1 class="display-6 text">Incrediminds</h1>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pretium dui ultrices, ornare mauris in, ultricies sapien. Proin dictum urna quis mauris pharetra, sit amet aliquam diam suscipit. In congue.</p>
    <a href="#">
      <img src="http://via.placeholder.com/500/500" />
    </a>
  </div>
</div>

​