Html 在Flexbox中居中并缩放图像

使用am

如果图像的本机高度小于容器的高度，则图像与容器垂直居中

如果图像的本机宽度大于容器的宽度，则图像将缩放到容器的宽度

如果图像的本机高度大于容器的高度，则图像将缩放到容器的高度

我注意到Chrome和Firefox处理flexbox儿童图片的方式有很大差异。Chrome已经完成了一半，但是垂直挤压图像。Firefox完成了一半，但水平挤压图像：


body，
html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.集装箱{
身高：100%；
宽度：100%；
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
img{
最大高度：100%；
最大宽度：100%；
}

CSS正在迎头赶上。它还没有最强大的功能，但是
object-fit:contain
完全符合您的要求（EDIT 11/17:Edge现在有部分支持，使IE11成为唯一不支持的浏览器）。只需将其放入img的css规则中，并将
max width:100%
和
max height:100%
更改为
width:100%
和
height:100%
。这是一个例子


.Container{
高度：100vh；
宽度：100vw；
背景：红色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
img{
身高：100%；
宽度：100%；
对象匹配：包含；
}
身体{
保证金：0；
}
方法1:使用CSS表格单元格，请参见以下演示


div{
边框：1px纯红；
宽度：100px；
高度：100px；
显示：表格单元格；
文本对齐：居中；
垂直对齐：中间对齐；
}
img{
最大宽度：100%；
最大高度：100%；
垂直对齐：中间对齐；
}

我认为您的演示效果很好（在Chrome中测试），我认为问题在于，图像在屏幕调整时不会按比例缩放（在Chrome中，宽度不会按比例增长），但当您调整窗口大小，然后让页面重新加载时，缩放效果会很好。你真的需要它在调整窗口大小时进行缩放吗？@KiiroSora09不幸的是，Firefox的情况并非如此，它甚至在重新加载页面时也会挤压图像。对不起，我现在没有Firefox。也许你可以将flex和object fit结合起来（见下面David的答案）。因此，对象适配将在现代浏览器上运行，而在IE 11上则采用flex。@KiiroSora09是的。我认为这可能是一种方法。除了@Pedr下面我介绍的其他方法之外，您可以将容器设置为
flex-direction:column
在Chrome上很好，但在Firefox上不太好（当您使视口短于图像的固有高度时，纵横比会发生变化）。我已经多次看到类似的问题——关于将图像设置为direct flex项目的问题，但仍然没有很好的答案，这是我见过的最接近的问题，希望能有所帮助。哇！我不知道这样的事情存在！我希望我们尽快得到更好的支持。谢谢。我甚至不知道这一点，但目前它还远远不能使用。polyfill。我在问题中添加了一个使用
对象拟合的示例。哇，我还没有看到IE11的这个问题。我正在考虑将polyfill用于我正在进行的一个项目。很高兴我找到了一个可以接受的解决方法，而不是使用它。遗憾的是，它不涉及IE的
对象匹配
，否则我会在这里发布。只是在IE10和IE11中测试了它，似乎工作正常：