Question

我试图在悬停时放大图像，它工作正常。但是，当我在图像上添加文本时，它在底部显示了一些间隙。我尝试过，但是这种差距根本无法消除

我尝试用边距填充，但没有用

.img-hover-zoom {
    height: auto;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.img-hover-zoom img {
    transition: transform .5s ease;

}

.img-hover-zoom:hover img {
    transform: scale(1.1);

}


.img-hover-zoom .text {
    position: absolute;
    padding-top: 15px;
    padding-bottom: 15px;
    left: 0px;
    bottom: 0px;
    margin: 0px auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    font-family: Quicksand;
    color: #fff;
    width: 100%;

}

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="img-hover-zoom">
        <img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
        <p class="text">Nature<br />What a beautiful sunrise</p>
    </div>
</body>

</html>

Answer 1

仅使您的图像显示以太表或块添加此CSS：

.img-hover-zoom img{
    display: table;
}

查看结果：

.img-hover-zoom {
    height: auto;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

.img-hover-zoom img {
    transition: transform .5s ease;

}

.img-hover-zoom:hover img {
    transform: scale(1.1);

}


.img-hover-zoom .text {
    position: absolute;
    padding-top: 15px;
    padding-bottom: 15px;
    left: 0px;
    bottom: 0px;
    margin: 0px auto;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    font-family: Quicksand;
    color: #fff;
    width: 100%;

}

.img-hover-zoom img{
    display: table;
}

<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <div class="img-hover-zoom">
        <img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
        <p class="text">Nature<br />What a beautiful sunrise</p>
    </div>
</body>

</html>

Answer 2

只需添加显示：即可屏蔽您的.img-hover-zoom img

  .img-hover-zoom img {
      display: block;
    }

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .img-hover-zoom {
      height: auto;
      overflow: hidden;
      position: relative;
      display: inline-block;
    }
    
    .img-hover-zoom img {
      transition: transform .5s ease;
      display: block;
    }
    
    .img-hover-zoom:hover img {
      transform: scale(1.1);
    }
    
    .img-hover-zoom .text {
      position: absolute;
      padding-top: 15px;
      padding-bottom: 15px;
      left: 0px;
      bottom: 0px;
      margin: 0px auto;
      text-align: center;
      background: rgba(0, 0, 0, 0.5);
      font-family: Quicksand;
      color: #fff;
      width: 100%;
    }
  </style>
</head>

<body>


  <div class="img-hover-zoom">
    <img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
    <p class="text">Nature<br/>What a beautiful sunrise</p>
  </div>

</body>

</html>

Answer 3

图像下方的间隙或多余空间不是错误或问题，这是默认行为。浏览器将其显示属性计算为内联，但它们为它们提供了特殊的行为，使它们更接近内联块元素（因为您可以垂直对齐它们，为它们提供高度，顶部/底部边距和填充，转换...）。 / p>

默认情况下，图像以线性方式呈现，就像字母一样。

对此的简单解决方案是强制图像阻止显示模式，该模式也可以解决上述问题或将img垂直对齐：底部

.img-hover-zoom {
  height: auto; 
  overflow:hidden;        
  position: relative;
  display: inline-block;
}

.img-hover-zoom img {
  transition: transform .5s ease;
  display:block;
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
}


.img-hover-zoom .text{
  position: absolute;
  padding-top:15px;
  padding-bottom:15px;
  left: 0px;
  bottom: 0px;
  margin:0px auto;
  text-align: center; 
  background: rgba(0, 0, 0, 0.5);
  font-family: Quicksand;
  color: #fff;
  width: 100%; 
}

<div class="img-hover-zoom">
  <img src="https://www.dike.lib.ia.us/images/sample-1.jpg" alt="Nature" style="width:100%;">
  <p class="text">Nature<br/>What a beautiful sunrise</p>
</div>

悬停时使用图像缩放，图像上的文字

3 个答案: