html横纵缩放,html – Flexbox图像缩放到高度并保持纵横比

如果你可以从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;

除此之外,我找不到不涉及脚本的方式.