Question

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

我必须解决的问题之一是，图像的大小可以不同，最大为512x512，但整个元素应保持1：1的宽高比。

我尝试将所有图片浮动，然后设置

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

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

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

<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

这是一个flexbox解决方案。仅限IE11 +，除非您使用shim。

＆＃13;

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

＆＃13;

<div class="flex-container outer vert">
  <div class="flex-container double">
    <div class="flex-item double">
      <img src="http://lorempixel.com/800/800/nature/1" />
    </div>

    <div class="flex-container vert">
      <div class="flex-item">
        <img src="http://lorempixel.com/800/800/nature/2" />
      </div>
      <div class="flex-item">
        <img src="http://lorempixel.com/800/800/nature/3" />
      </div>
    </div>
  </div>

  <div class="flex-container">
    <div class="flex-item">
      <img src="http://lorempixel.com/800/800/nature/4" />
    </div>
    <div class="flex-item">
      <img src="http://lorempixel.com/800/800/nature/5" />
    </div>
    <div class="flex-item">
      <img src="http://lorempixel.com/800/800/nature/6" />
    </div>
  </div>
</div>

＆＃13;

Answer 2

我没有经过彻底的测试或打磨，但使用table，table-row和table-cell的CSS显示属性呢？

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>

Answer 3

嗯......不确定你是否会很快回到这个问题。这就是我使用浮动所做的事情（就像你曾经谈过的那样）。我的图片没有按比例设置为width: 100%和height: auto。同样，我不确定你想要的是不是完美正方形（1：1比例）的图像。

.allimages {
  width: 90vw;
  height: 90vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f3f3f3;
}
.image-container {
  display: inline-block;
  float: left;
  height: 33.333%;
  width: 33.333%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #222;
  box-sizing: border-box;
}

.image-container.big {
  height: 66.655%;
  width: 66.655%;
}
.image-container img {
  width: 100%;
  height: auto;
}

<div class="allimages">
  <div class="image-container big">
    <image src="http://lorempixel.com/700/700/cats"/>
  </div>
  <div class="image-container">
    <image src="http://lorempixel.com/400/400/sports"/>
  </div>
  <div class="image-container">
    <image src="http://lorempixel.com/500/500/food"/>
  </div>
  <div class="image-container">
    <image src="http://lorempixel.com/500/500/sports"/>
  </div>
  <div class="image-container">
    <image src="http://lorempixel.com/400/400/food"/>
  </div>
  <div class="image-container">
    <image src="http://lorempixel.com/500/700/sports"/>
  </div>
</div>

Answer 4

如果你不喜欢表css，你也可以这样做：

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

.all-the-images {
  height: 300px;
  width: 300px;
  background-color: green;
}
img {
  max-width: 100%;
  max-height: 100%;
  float: left;
}
.all-the-images .image-row1 {
  height: 66.66666667%;
}
.all-the-images .image-row1 .image-big {
  width: 66.66666667%;
  height: 100%;
  float: left;
}
.all-the-images .image-row1 .image-right {
  width: 33%;
  height: 100%;
  float: left;
}
.all-the-images .image-row2 {
  height: 33.33333333%;
}
.all-the-images .image-row2 img {
  max-width: 33.33333333%;
}

https://jsfiddle.net/arleonard54/yu3Ls4zL/

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

4 个答案: