我正在尝试使用非表css aproach进行以下操作：
我必须解决的问题之一是图像可以是不同的大小,高达512×512,但整个元素应保持1：1的宽高比.
我试着让所有图像浮动,并设置
.image {
width: 33%;
height: 33%;
}
除了我设置为宽度的第一个：66％;身高：66％.
我也尝试将它们包装在div中以使定位更容易：
http://codepen.io/luckydonald/pen/dOwNGX(少用)
https://jsfiddle.net/luckydonald/96hqds80/(生成css)
但是不同的图像大小会破坏行.
最佳答案
这是一个flexBox解决方案.仅限IE11,除非您使用的是shim.
.flex-container {
display: flex;
background: #eee;
margin: 0 auto;
flex: 1;
width: 100%;
}
.flex-container.vert {
flex-direction: column;
}
.flex-container.outer {
width: 30vw;
height: 30vw;
}
.flex-item {
background: tomato;
flex: 1;
}
.flex-item:nth-child(2n) {
background: pink;
}
.flex-item img {
width: 100%;
height: 100%;
}
.double {
flex: 2;
background: lightgreen;
}
