我正在尝试使用非表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;}以上是内存溢出为你收集整理的html – 如何在方格中排列两种尺寸的图像？全部内容，希望文章能够帮你解决html – 如何在方格中排列两种尺寸的图像？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）