悬停时图像底部边缘出现一条白线

Question

我遇到了“div 类画廊”内每个图像底部出现的白色像素线的问题。当鼠标悬停在其上时会出现白线[我在悬停时包含了变换元素]

此外，这些图像仅包含在“图库”和“照片”类别中，而不包含在任何其他类别中。

代码如下：

div.photo {
  height: 2rem;
  transition: transform .2s;
}

.photo:hover {
  transform: scale(0.9);
  cursor: pointer;
  box-shadow: 15px 15px 15px;
}

.gallary {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2em;
}

<div class="gallary">
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=1"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=2"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=3"></div>
</div>

Answer 1

从 .photo 中删除 box-shadow 并将其添加到图像中：

 div.photo {
height: 2rem;
transition: transform .2s;
}
.photo:hover {
transform: scale(0.9);
cursor: pointer;
}
.photo:hover img{
  box-shadow:  15px 15px 15px;
}
.gallary {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2em;
}

    <div class="gallary"> 
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
    </div>

Answer 2

尝试将图像放入有边框的

<div>

元素内，您将在图像底部看到额外的空白（大约 3px）。发生这种情况是因为图像是内联级元素，因此浏览器在基线下添加一些空白以调整其他内联元素。摆脱这个问题的最简单方法是将图像的默认显示值从内联更改为块，即将样式

display: block;

应用于图像。

Answer 3

您可以通过将图像元素类设置为简单地摆脱它：

.image__container {
  display: inline-block;
}

.image {
  vertical-align: top;
}