如果你可以从flex更改为block:
正如@janfoeh所指出的,使用对象拟合:包含使它成为可能:
body,html {
height: 100%;
margin: 0;
padding: 0;
overflow:hidden;
position:relative;
}
.container {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.Box {
background: yellow;
width: 100%;
padding: 0 5%;
Box-sizing:border-Box;
max-width: 100%;
height: 100%;
max-height:100%;
position:relative;
}
.Box img {
height:100%;
max-height: 100%;
width: auto;
max-width: 100%;
margin: auto;
position:absolute;
top:0%;
bottom:0%;
left:0%;
right:0%;
display:block;
object-fit: contain;
}
如果需要Flex布局,作为最后的手段,您可以考虑使用背景图像,这使得整个事情变得非常简单:https://jsfiddle.net/svArtist/e1c2tLme/
background: url(http://placehold.it/300) no-repeat center center;
background-size: contain;
除此之外,我找不到不涉及脚本的方式.