使背景图像适合Flex容器

Question

我使用flexbox创建了一个网格,允许3个图像并排排列.我给它们的宽度为33.333%,所以它们完全吻合.

但是现在我想引入一个css悬停效果,当你将鼠标悬停在图像上时,另一个图像会淡入.

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

我在这里得到了淡入淡出效果的代码,但是虽然我一直在操作代码但是我无法使图像完全适合容器中的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-sizeCSS属性指定的背景图像的大小.图像的大小可以完全约束或仅部分地用于保持其固有比率.