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

Question

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

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

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

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

除了我设置的第一个width: 66%; height: 66%.

我也尝试用divs 包装它们以使定位更容易:

<div class="all-the-images">
  <div class="image-row1">
    <div class="image-big">
      <div class="image"><img src="http://placehold.it/498x512" /></div>
    </div>
    <div class="image-right">
      <div class="image"><img src="http://placehold.it/313x313" /></div>
      <div class="image"><img src="http://placehold.it/498x512" /></div>
    </div>
  </div>
  <div class="image-bottom">
    <div class="image"><img src="http://placehold.it/512x234" /></div>
    <div class="image"><img src="http://placehold.it/234x234" /></div>
    <div class="image"><img src="http://placehold.it/234x512" /></div>
  </div>
</div>

http://codepen.io/luckydonald/pen/dOwNGX(使用更少)
https://jsfiddle.net/luckydonald/96hqds80/(生成的css)

但是不同的图像大小会破坏行.

Answer 1

我还没有彻底测试或完善，但是使用table,table-row和的 CSS 显示属性怎么样table-cell？

span {
	border: 1px solid blue;
}

<div style="width:200px; height: 200px; display: table;">
<div display="table-row">
	<span style="width: 66%; height: 66%; display: table-cell">
		<img style="width: 100%" src="http://placehold.it/498x512" />
	</span>
	<span style="width: 33%; display: table-cell; vertical-align: top;">
		<img style="width: 100%;" src="http://placehold.it/512x512" />
		<img style="width: 100%;" src="http://placehold.it/512x512" />
	</span>
</div>
<div display="table-row">
	<span style="width: 33%; display: table-cell; vertical-align: top;">
		<img style="width: 100%;" src="http://placehold.it/512x512" />
	</span>
	<span style="width: 33%; display: table-cell; vertical-align: top;">
		<img style="width: 100%;" src="http://placehold.it/512x512" />
	</span>
	<span style="width: 33%; display: table-cell; vertical-align: top;">
		<img style="width: 100%;" src="http://placehold.it/512x512" />
	</span>
</div>
</div>