html - 制作背景图像以适应 flex 容器

Question

我使用 flexbox 创建了一个网格，它允许 3 个图像并排对齐。我给它们设置了 33.333% 的宽度，因此它们完全适合。

但是现在我想介绍一个 css 悬停效果，当您将鼠标悬停在图像上时，另一个图像会淡入。

我的效果很好，但我遇到的问题是悬停时淡入的图像太大，因此只有大约 75% 的图像出现在容器中。

我得到淡入淡出效果的代码here ，但尽管我一直在操纵代码，但我无法让图像完全 100% 适合容器。两张图片的尺寸完全相同。

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1
}

.bord {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
}

.crossfd {
  background: url("https://picsum.photos/200/200?image=0");
  display: inline-block;
  background-size: cover;
}

.crossfd img {
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.crossfd img:hover {
  opacity: 0;
}

<div class="container">
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=1" width="100%" alt="Lou" />
  </div>
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=2" width="100%" alt="Lou" />
  </div>
  <div class="box bord crossfd">
    <img src="https://picsum.photos/200/300?image=3" width="100%" alt="Lou" />
  </div>
</div>

Answer 1

尝试在 .crossfd 类上添加 background-size: cover;。

您也可以尝试contain 或100%，阅读 MDN 上的规范.

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.