Question

我希望缩小任意数量的图像以适应固定宽度的div。似乎flexbox对于这个目的是好的，但我似乎无法让它与包装多行一起工作。

如果我将flex-flow设置为row wrap而将flex设置为1 1 auto，则图片太大。

.container {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid black;
  width: 300px;
  height: 300px;
}

.image {
  flex: 1 1 auto;
}

img {
  max-width: 100%;
}

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>

如果我将flex-flow设置为row或将1 1 0设置为.container { display: flex; flex-flow: row wrap; border: 1px solid black; width: 300px; height: 300px; } .image { flex: 1 1 0; } img { max-width: 100%; }，则图片不会换行到多行：

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>

java.lang.Class

如何使图像扩展到足以尽可能多地包裹以填充div，但不是那么多它们突破了它？

Answer 1

如果我将flex-flow设置为row wrap而将flex设置为1 1 auto，则图片太大。

使用flex-basis: auto，您的项目将采用其内容的大小（在本例中为图像）。这就是你在第一个演示中得到的结果：图像的固有宽度。

如果我将flex-flow设置为row或将1 1 0设置为flex-basis: 0，则图片不会换行到多行。

使用flex-basis，您的项目将忽略内容大小，并在项目中均匀分配行中的所有空间。这就是你的第二个演示中发生的事情：它创建了三个相等宽度的项目。因此，没有理由包装。

要控制弹性项目的大小，您需要定义他们的.container { display: flex; flex-flow: row wrap; align-content: flex-start; /* pack wrapping lines to the top */ border: 1px solid black; width: 300px; height: 300px; } .image { flex: 0 0 30%; margin: 5px; } img { max-width: 100%; }。这是一个粗略的草图：

<div class="container">
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>
  <div class="image">
    <img src="http://www.placebacon.net/400/300">
  </div>  
</div>

debug

Answer 2

只是为了好玩。

＆＃13;

var container1 = document.querySelector('.container1'),
  container2 = document.querySelector('.container2'),
  img = container2.querySelectorAll('.container2 img'),
  width = 50,
  stop = false;

expand();

function expand() {
  for (var i = 0; i < img.length; i++) {
    img[i].style.width = width + 'px';
  }
  if (stop) return;
  if (container2.clientHeight < container1.clientHeight) {
    width++;
    setTimeout(function() {
      expand()
    }, 10);
  } else {
    width--;
    stop = true;
    expand();
  }
}

＆＃13;

.container1 {
  border: 1px solid black;
  height: 300px;
  width: 300px;
}

.container2 {
  font-size: 0;
}

＆＃13;

<div class="container1">
  <div class="container2">
    <img src="http://www.placebacon.net/400/300">
    <img src="http://www.placebacon.net/400/300">
    <img src="http://www.placebacon.net/400/300">
  </div>
</div>

＆＃13;

收缩图像以适应包含行

2 个答案: