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

发布时间：2020-12-14 22:38:07 所属栏目：资源来源：网络整理

导读：我正在尝试使用非表css aproach进行以下操作：我必须解决的问题之一是图像可以是不同的大小,高达512512,但整个元素应保持1：1的宽高比. 我试着让所有图像浮动,并设置 .image { width: 33%; height: 33%;} 除了我设置为宽度的第一个：66％;身高：66％. 我也

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

design

我必须解决的问题之一是图像可以是不同的大小,高达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;
}


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!