html – 如何在方格中排列两种尺寸的图像？

我正在尝试使用非表css aproach进行以下操作：

我必须解决的问题之一是图像可以是不同的大小,高达512×512,但整个元素应保持1：1的宽高比.

我试着让所有图像浮动,并设置

.image {
  width: 33%;
  height: 33%;
}

除了我设置为宽度的第一个：66％;身高：66％.

我也尝试将它们包装在div中以使定位更容易：

ottom">
    

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;
}