chrome 和 edge 桌面上的图像和图像边框之间的小间隙

Question

我在桌面（Windows 10 20H2、macOS Big Sur 11.3.1）上的 Chrome（版本 93.0.4531.2）和 Edge（版本 91.0.864.37）的边框内对齐图像时遇到了一些奇怪的行为。这在移动设备上不是问题。

请参阅图片以查看小间隙。这是非常喜怒无常的，因为在某些卡片上它们出现在左侧，在其他卡片上出现在顶部，在某些卡片上同时出现，而在其他卡片上则根本没有。

到目前为止，我已经尝试过（各种排列方式）：

• margin: 0
• padding: 0
• display: block
• vertical-align: bottom
• vertical-align: top
• vertical align: -webkit-baseline-middle

我的缩放设置为 100%。这是我最近尝试的代码。我在这个项目中使用 Vuejs。

vue 模板：

<div class="card">
  <img v-if="image" :src="image" :alt="name" />
</div>

base.scss

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

组件scss：

.card {
  width: 240px;
  margin-bottom: 25px;
  img {
    width: 240px;
    height: 240px;
    vertical-align: -webkit-baseline-middle;
    object-fit: cover;
    border: 1.5px solid black;
  }
}

在此处查看实时行为：https://www.sableradio.live/shows。任何帮助将不胜感激，在此先感谢。

Answer 1

您可以通过简单地从边框 css 属性中删除浮点数来解决这个问题，就像 reff 一样。附上图片截图

 .card {
  width: 240px;
  margin-bottom: 25px;
  img {
    width: 240px;
    height: 240px;
    vertical-align: -webkit-baseline-middle;
    object-fit: cover;
    border: 1px solid black;
  }
}