html - 如何防止在网格布局中悬停时在 CSS 图像转换期间调整图像大小

Question

我想要一个图像，当鼠标悬停在上面时会过渡到另一个图像。我目前有工作代码来执行此操作，除了顶部图像最初会自动重新缩放为更大的尺寸，因此当顶部图像从不透明 1 过渡到 0 时，图像看起来像是“移动”了，因为它是不同的大小比底部图像。我已确认顶部和底部图像的尺寸相同。

我的代码和问题可以在此处的预览中看到:https://jsfiddle.net/k3jLxofv/1/

在“Project Area 1”中，我们可以看到最初加载了 2 个图像。一张图片比另一张小，即使图片相同(我们可以看到两条线)。我不知道为什么一张图片比另一张大。我希望能够将鼠标悬停在“元素区域 1”上并进行无缝过渡，这样结果看起来就不像被移动了。

“Project Area 2”显示图像在两种状态下的大小(未悬停和悬停时)。

提前致谢!

.projects-grid-setup {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  grid-gap: 0.9rem;
  width: 98.3%;
  margin: 0 auto;
  margin-bottom: 1rem;
}

.projects-tile {
  background: black;
}

.projects-tile-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.crossfade {
  position: relative;
}

.crossfade img.fade {
  position: absolute;
  left: 0;
  opacity: 1;
  transition: opacity 0.55s ease-in-out;
}

.crossfade img.top:hover {
  opacity: 0;
}

<div class="projects-grid-setup">
  <!--Project Start-->
  <a class="projects-tile" href="google.com" target="_blank">
    <div class="crossfade">
      <img class="projects-tile-picture top fade" src="https://picsum.photos/300/200?1" />
      <img class="projects-tile-picture" src="https://picsum.photos/300/200?1" />
    </div>
    <p class="projects-tile-title">
      Project Area 1
    </p>
  </a>
</div>

Answer 1

如下所述保持高度自动并尝试

.projects-tile-picture {
  width: 100%;
  height: auto;
  object-fit: cover;
}