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

问题描述

我遇到了出现在“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>

解决方法

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

    <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>

{{1}}

,

尝试将图像放入带有边框的 <div> 元素中，您会在图像底部看到一个额外的空白区域（大约 3 像素）。发生这种情况是因为图像是内联级元素，因此浏览器会在基线下添加一些空白来调整其他内联元素。摆脱这种情况的最简单方法是将图像的默认显示值从内联更改为块，即将样式 display: block; 应用于图像。