Html Flexbox图像匹配容器高度

我在我的网站上有4幅图片，其中2幅垂直显示，2幅水平显示在网格中这些图片旁边

我遇到的问题是，当页面是桌面大小时，图像会正确对齐，但当它缩小到移动时，图像会以不同的比例缩放，看起来不对齐

正如您所看到的，左侧的垂直图像无法缩放以适应容器高度，是否有办法拉伸这些图像以匹配容器高度

如何使图像始终保持对齐

* { 框大小：边框框； } .家庭促销包装{ 显示器：flex； 柔性包装：包装； } .家庭促销单元{ 显示器：flex； 弹性：0.50%； } 格里达先生{ 显示器：flex； 柔性包装：包装； flex:1自动； } 格里布先生{ 显示器：flex； 柔性包装：包装； } .细胞{ 显示器：flex； 弹性：0.50%； 填充：10px； } .gridB.单元格：n-child1{ 弹性：0.100%； } .gridB.单元格：n-child2{ 弹性：0.100%； } .文本垂直{ 位置：绝对位置； 排名：0； 左：0； 右：0； 颜色：000； z指数：1； 文本对齐：居中； 背景：rgba 255255,0.6； 填充：20px； } .内部单元格垂直：悬停。文本垂直{ 背景：RGBA255255,0； 过渡：背景0.8秒轻松； } .内电池垂直{ 位置：相对位置； 溢出：隐藏； 背景：ff00ff； } .内电池垂直img{ 宽度：100%； 高度：自动； 显示：块； 溢出：隐藏； } .内单元格垂直：：后{ 内容：'\A'； 位置：绝对位置； 宽度：100%；高度：100%； 顶部：0；左侧：0； 背景：RGBA255255.6； 动画名称：fadeFromtop； -webkit动画名称：fadeFromtop； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：放松； -webkit动画计时功能：轻松输出； 动画填充模式：正向； -webkit动画填充模式：正向； 溢出：隐藏； } .内部单元格垂直：悬停.text{ 底部：50%； 转化：转化率50%； -webkit转换：翻译50%； -moz变换：平移50%； -o-转换：翻译50%； } .文本{ 位置：绝对位置； 排名：0； 左：0； 左侧填充：35px； 填充底部：17px； 过渡：所有0.5s缓解； 身高：100%； } a{ 显示器：flex； } a:悬停。内单元格垂直：之后{ 动画名称：fadeFromBottom； -webkit动画名称：fadeFromBottom； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：轻松自如； -webkit动画计时功能：轻松； 动画填充模式：正向； 不透明度：1； 溢出：隐藏； } @关键帧fadeFromBottom{ 0%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转化：转化率100%； -o-变换：平移100%； 转化：转化率100%； } 100%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； 显示：块； } } @关键帧fadeFromtop{ 0%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； } 100%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转换：翻译400%； -o-变换：平移100%； 转化：转化率100%； } }

如果要保持img，可以使用对象匹配

注意，在浏览器支持方面，对象拟合有限制：

如果您需要更好的浏览器支持，下面是一个使用背景图像的示例：。 此版本的主要功能是设置高度和嵌套的flex容器

堆栈片段

* { 框大小：边框框； } .家庭促销包装{ 显示器：flex； 柔性包装：包装； } .家庭促销单元{ 显示器：flex； 弹性：0.50%； } 格里达先生{ 显示器：flex； 柔性包装：包装； flex:1自动； } 格里布先生{ 显示 ay:flex； 柔性包装：包装； } .细胞{ 显示器：flex； 弹性：0.50%； 填充：10px； } .gridB.单元格：n-child1{ 弹性：0.100%； } .gridB.单元格：n-child2{ 弹性：0.100%； } .文本垂直{ 位置：绝对位置； 排名：0； 左：0； 右：0； 颜色：000； z指数：1； 文本对齐：居中； 背景：rgba 255255,0.6； 填充：20px； } .内部单元格垂直：悬停。文本垂直{ 背景：RGBA255255,0； 过渡：背景0.8秒轻松； } .内电池垂直{ 位置：相对位置； 溢出：隐藏； 背景：ff00ff； } .内电池垂直img{ 宽度：100%； 高度：100%；/*已更改*/ 显示：块； 溢出：隐藏； 对象适合度：已添加封面；/**/ } .内单元格垂直：：后{ 内容：'\A'； 位置：绝对位置； 宽度：100%；高度：100%； 顶部：0；左侧：0； 背景：RGBA255255.6； 动画名称：fadeFromtop； -webkit动画名称：fadeFromtop； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：放松； -webkit动画计时功能：轻松输出； 动画填充模式：正向； -webkit动画填充模式：正向； 溢出：隐藏； } .内部单元格垂直：悬停.text{ 底部：50%； 转化：转化率50%； -webkit转换：翻译50%； -moz变换：平移50%； -o-转换：翻译50%； } .文本{ 位置：绝对位置； 排名：0； 左：0； 左侧填充：35px； 填充底部：17px； 过渡：所有0.5s缓解； 身高：100%； } a{ 显示器：flex； } a:悬停。内单元格垂直：之后{ 动画名称：fadeFromBottom； -webkit动画名称：fadeFromBottom； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：轻松自如； -webkit动画计时功能：轻松； 动画填充模式：正向； 不透明度：1； 溢出：隐藏； } @关键帧fadeFromBottom{ 0%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转化：转化率100%； -o-变换：平移100%； 转化：转化率100%； } 100%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； 显示：块； } } @关键帧fadeFromtop{ 0%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； } 100%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转换：翻译400%； -o-变换：平移100%； 转化：转化率100%； } }

如果要保持img，可以使用对象匹配

注意，在浏览器支持方面，对象拟合有限制：

如果您需要更好的浏览器支持，下面是一个使用背景图像的示例：。 此版本的主要功能是设置高度和嵌套的flex容器

堆栈片段

* { 框大小：边框框； } .家庭促销包装{ 显示器：flex； 柔性包装：包装； } .家庭促销单元{ 显示器：flex； 弹性：0.50%； } 格里达先生{ 显示器：flex； 柔性包装：包装； flex:1自动； } 格里布先生{ 显示器：flex； 柔性包装：包装； } .细胞{ 显示器：flex； 弹性：0.50%； 填充：10px； } .gridB.单元格：n-child1{ 弹性：0.100%； } .gridB.单元格：n-child2{ 弹性：0.100%； } .文本垂直{ 位置：绝对位置； 排名：0； 左：0； 右：0； 颜色：000； z指数：1； 文本对齐：居中； 背景：rgba 255255,0.6； 填充：20px； } .内部单元格垂直：悬停。文本垂直{ 背景：RGBA255255,0； 过渡：背景0.8秒轻松； } .内电池垂直{ 位置：相对位置； 溢出：隐藏； 背景：ff00ff； } .内电池垂直img{ 宽度：100%； 高度：100%；/*已更改*/ 显示：块； 溢出：隐藏； 对象匹配：覆盖/* 增加*/ } .内单元格垂直：：后{ 内容：'\A'； 位置：绝对位置； 宽度：100%；高度：100%； 顶部：0；左侧：0； 背景：RGBA255255.6； 动画名称：fadeFromtop； -webkit动画名称：fadeFromtop； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：放松； -webkit动画计时功能：轻松输出； 动画填充模式：正向； -webkit动画填充模式：正向； 溢出：隐藏； } .内部单元格垂直：悬停.text{ 底部：50%； 转化：转化率50%； -webkit转换：翻译50%； -moz变换：平移50%； -o-转换：翻译50%； } .文本{ 位置：绝对位置； 排名：0； 左：0； 左侧填充：35px； 填充底部：17px； 过渡：所有0.5s缓解； 身高：100%； } a{ 显示器：flex； } a:悬停。内单元格垂直：之后{ 动画名称：fadeFromBottom； -webkit动画名称：fadeFromBottom； 动画持续时间：300ms； -webkit动画持续时间：300ms； 动画计时功能：轻松自如； -webkit动画计时功能：轻松； 动画填充模式：正向； 不透明度：1； 溢出：隐藏； } @关键帧fadeFromBottom{ 0%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转化：转化率100%； -o-变换：平移100%； 转化：转化率100%； } 100%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； 显示：块； } } @关键帧fadeFromtop{ 0%{ 不透明度：1； -webkit转换：translateY0px； -moz变换：translateY0px； -ms变换：translateY0px； -o变换：translateY0px； 转换：translateY0px； } 100%{ 不透明度：0； -webkit转换：translateY100%； -moz变换：translateY100%； -ms转换：翻译400%； -o-变换：平移100%； 转化：转化率100%； } }

---

我相信这是css中第64行的一个换行

高度：自动；身高：100%

---

这是你的电话号码。请让我知道这是否有帮助。

我相信这是css中第64行的一行更改

高度：自动；身高：100%

---

这是你的电话号码。请告诉我这是否有帮助。

图像有不同的大小，CSS说它们的高度应该是自动的，所以它们只在某些条件下几乎完全对齐：大约从1600px到1700px宽的屏幕。您的图像确实完全对齐，我不知道你的意思是什么？object fit怎么会不按你想要的方式工作？我还用一个使用背景图像的示例更新了我的答案。我无法使object fit与我的代码一起工作，浏览器支持目前对我来说太有限，但thanksImages有不同的大小，CSS说它们的高度应该是自动的，因此，只有在某些条件下，它们才会几乎完美地对齐：屏幕宽度约为1600px至1700px。您的图像确实可以完美对齐，我不知道你的意思是什么？object fit是如何不按你想要的方式工作的？我还使用了一个使用背景图像的示例更新了我的答案。我无法使object fit与我的代码一起工作，浏览器支持目前对我来说太有限，但幸运的是，这将拉伸和扭曲图像。尝试一个不同的比率，你会看到。@LGSon这就是实际问题所在，有没有办法拉伸这些图像以匹配容器高度。拉伸，是的，扭曲/破坏纵横比，否。@tom harrison，在这种情况下，您可以考虑将图像设置为背景图像，以保持浏览器支持的比例。谢谢这些建议，但这些选项都没有按照我想要的方式工作，所以我很可能求助于使用背景图像。不幸的是，这会拉伸和扭曲图像。尝试一个不同的比率，你会看到。@LGSon这就是实际问题所在，是吗

---

一种拉伸这些图像以匹配容器高度的方法。拉伸，是的，扭曲/破坏纵横比，不是。@tom harrison，在这种情况下，您可以考虑将图像设置为背景图像，以保持浏览器支持的外观比例。谢谢您的建议，但这些选项都没有我想要的方式工作，所以我可能求助于使用背景图像。

.inner-cell-vertical img {
  width: 100%;
  height: 100%;
  display: block;
  overflow:hidden;
}