html – 使背景图像适合Flex容器

概述我使用flexbox创建了一个网格,允许3个图像并排排列.我给它们的宽度为33.333％,所以它们完全吻合. 但是现在我想引入一个css悬停效果,当你将鼠标悬停在图像上时,另一个图像会淡入. 我的效果很好,但我遇到的问题是悬停时淡入的图像太大,因此只有大约75％的图像出现在容器中. 我得到了淡入淡出效果here的代码,但是虽然我一直在 *** 作代码但是我无法让图像在容器中完全适合100％.两个图像都是完 我使用flexBox创建了一个网格,允许3个图像并排排列.我给它们的宽度为33.333％,所以它们完全吻合.

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

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

我得到了淡入淡出效果here的代码,但是虽然我一直在 *** 作代码但是我无法让图像在容器中完全适合100％.两个图像都是完全相同的尺寸.

.container {  display: flex;  flex-wrap: wrap;}.Box {  wIDth: 33.333%;}.bord {  padding: 0;  margin: 0;  -webkit-Box-sizing: border-Box;}.crossfd {  background: url("https://picsum.photos/200/200?image=0");  display: inline-block;}.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 >  <div >    <img src="https://picsum.photos/200/300?image=1" wIDth="100%" alt="Lou" />  </div>  <div >    <img src="https://picsum.photos/200/300?image=2" wIDth="100%" alt="Lou" />  </div>  <div >    <img src="https://picsum.photos/200/300?image=3" wIDth="100%" alt="Lou" />  </div></div>

解决方法 尝试添加背景大小：封面;在.crossfd类.

您也可以尝试包含或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.

@H_502_39@ 总结

以上是内存溢出为你收集整理的html – 使背景图像适合Flex容器全部内容，希望文章能够帮你解决html – 使背景图像适合Flex容器所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。