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

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

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

background-size CSS属性指定背景图像的大小。图像的大小可以完全约束，也可以仅部分限制，以保持其固有比率。

使背景图像适合Flex容器

1 个答案: