我想为图像制作一个列表,并调整它们的大小以适应窗口,如果添加了更多,则不扩展父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%;
}
正如您在示例中看到的图像高度未调整大小,我该如何解决此问题?
答案 0 :(得分:0)
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%的额外高度。
答案 1 :(得分:0)
将每个图像添加到单独的div中,并相应地更改样式
{{1}}
答案 2 :(得分:0)
尝试使用flex-direction: column;
.images{
background:rgba(14, 11, 10, 0.8);
display:flex;
flex-direction: column;
flex:10;
}