Question

我想为图像制作一个列表，并调整它们的大小以适应窗口，如果添加了更多，则不扩展父div。

可以使用css display:flex选项或任何其他方式完成吗？

Css for image holding div和它的孩子

.images{
    background:rgba(14, 11, 10, 0.8);
    display:flex;
    flex:10;
}

.images > img{
     flex:1;
     max-width:100%;
     max-height:100%;
}

正如您在示例中看到的图像高度未调整大小，我该如何解决此问题？

Answer 1

你到底想要做什么？你想让图像拉伸到父div的宽度吗？在这种情况下，这是你应该做的：

function getNumbers(str) {
    return str.split("")
        .filter(function(ch) { return /\d/.test(ch); })
        .map(function(ch) { return +ch; });
}

function division() {
    var numbers = getNumbers(document.getElementById("numbers").value);
    if (numbers[1] == 0) {
        throw new Error("Division by zero error");
    }
    return numbers[0] / numbers[1];
}

或者您希望图像拉伸到父级的宽度和高度？在这种情况下，您应该为图像添加100％的额外高度。

Answer 2

将每个图像添加到单独的div中，并相应地更改样式

{{1}}

Answer 3

尝试使用flex-direction: column;

.images{
  background:rgba(14, 11, 10, 0.8);
  display:flex;
  flex-direction: column;
  flex:10;
}

显示flex子项以自动调整大小以适合父元素

3 个答案: