时间戳

首页 > 解决方案 > 试图放大图像的悬停：圆形图像溢出容器

html - 试图放大图像的悬停：圆形图像溢出容器

问题描述

我试图让一个圆形图像在悬停时进行缩放。但是，我无法让它工作 - 图像溢出容器。谁能帮助我并告诉我我做错了什么？片段如下。谢谢。

.col-lg-4.col-md-6.p-4{
  overflow:hidden !important
}


.img-fluid.d-block.mb-3.mx-auto.rounded-circle:hover{
    -webkit-transform: scale(1.1);
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

img.rounded-circle.z-depth-1 {
  max-height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-4 col-md-6 p-4 johnDoe"> 
    <img class="img-fluid d-block mb-3 mx-auto rounded-circle" alt="Card image cap" width="200" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg">
    <h4> <b class='bioName'>John Doe</b> </h4>
    <p class="mb-0">CEO and founder</p>
</div>

标签： htmlcssimagebootstrap-4

解决方案

问题是您的容器比图像大得多，因此图像可以放大并且仍然完全可见。

要实现您正在寻找的内容，您需要在其周围添加一个与图像大小相同的容器，因此当图像扩展时，它会被裁剪。您还需要使该容器为圆形，以便以圆形方式裁剪图像。

这是代码：

.johnDoe {
  text-align: center;
}
.img-container {
  position: relative;
  overflow: hidden;
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.img-container img {
  margin-bottom: 0 !important;
}

.img-fluid.d-block.mb-3.mx-auto.rounded-circle {
    -webkit-transition: all 0.125s ease-in-out 0s;
    -moz-transition: all 0.125s ease-in-out 0s;
    -ms-transition: all 0.125s ease-in-out 0s;
    -o-transition: all 0.125s ease-in-out 0s;
    transition: all 0.125s ease-in-out 0s;
}

.img-fluid.d-block.mb-3.mx-auto.rounded-circle:hover{
    -webkit-transform: scale(1.1);
}

img.rounded-circle.z-depth-1 {
  max-height:200px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-4 col-md-6 p-4 johnDoe"> 
  <span class="img-container">
    <img class="img-fluid d-block mb-3 mx-auto rounded-circle" alt="Card image cap" width="200" src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1559454811/team-1.jpg">
  </span>
  <h4> <b class='bioName'>John Doe</b> </h4>
  <p class="mb-0">CEO and founder</p>
</div>

推荐阅读