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

我希望当我将其悬停在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>

格里奥工作室
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
网络开发
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
数据可视化
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
递增
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格

感谢您的帮助

编辑OP真正想要的内容。 这张图片占据了整个宽度和高度，没有拉伸。您可以使用

object-fit:cover

有关对象拟合的信息：

img{
显示：无；
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.effect:悬停.text{
显示：无；
}
.效果：悬停img{
显示：块；
}
h1.text{
字体大小：14px；
}

格里奥工作室
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
网络开发
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
数据可视化
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格
递增
Lorem ipsum Door sit amet，是一位杰出的领导者。Nam pretium dui ultrices，ornare mauris in，ultrices sapien。在这句名言中，他是一个坚定的拥护者。在康格

将

宽度：100%

添加到

img

。这将使它只扩展到容器的宽度。我是否应该删除最大高度：50vh；？你不需要它，所以你可以。下面的答案。这可以防止它从div中渗出，但不能填充它。我希望它填充div而不向外延伸。

object fit

规则不适用于IE:。你应该用

minwidth:100%来做；最小高度：100%；宽度：100%；高度：自动然后使用
平移
使图像居中而不变形。我知道，这在所有浏览器中都适用，但只有E11和更旧版本的Edge——微软不再支持。作为一名全职网络开发人员，我不会支持IE，除非客户特别付费。@CornelRaiu当然，我明白。我只是觉得我们需要开始推动网络向前发展。我知道一些企业客户会因为内部问题而被困在IE11上。我还看到IE11的趋势继续下降。但是，说到你的观点，我们最近要求在IE9中使某些东西看起来更好！如果有人付钱，我想我们会这样做：）因为我为你感到难过：）我真的很抱歉：）