Html 如何创建全宽图像网格？

我已经创建了一个带有过滤功能的图像网格，下面是它当前的外观：

我正在尝试将图像设置为全宽，就像您在本网站上看到的那样：

我尝试在

#portfoliolist

上将宽度设置为100%，但没有成功

以下是全部代码：

html{
溢出y：滚动；
}
身体{
字体系列：Helvetica、Arial、Verdana；
背景：#efefurl（'../img/ticks.png'）重复0；
利润率：15px0；
字体大小：12px；
}
#信息{
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
背景#fcf8e3；
边框：1px实心#fbeed5；
宽度：95%；
最大宽度：900px；
保证金：0自动40px自动；
字体系列：arial；
字体大小：13px；
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
}
#信息包装器{
填充：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
}
#信息a{
颜色：#c09853；
文字装饰：无；
}
#信息p{
保证金：5px0；
}
.集装箱1{
位置：相对位置；
宽度：960px；
身高：100%；
保证金：0自动；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#过滤器{
利润率：1%；
填充：0；
列表样式：无；
}
#过滤力{
浮动：中心；
显示：内联块；
}
#李斯潘{
显示：块；
填充：5px20px；
文字装饰：无；
颜色：#666；
光标：指针；
边界半径：20px；
}
#过滤器li span.active{
背景#e95a44；
颜色：#fff；
}
#投资组合{
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
宽度：23%；
利润率：0%；
显示：无；
浮动：左；
溢出：隐藏；
}
.公文包包装{
溢出：隐藏；
职位：相对！重要；
背景：透明；
光标：指针；
}
.投资组合img{
最大宽度：100%；
位置：相对位置；
排名：0；
-webkit过渡：所有600ms立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有600ms立方贝塞尔（0.645,0.045,0.355,1）；
}
.公文包.标签{
位置：绝对位置；
宽度：100%；
高度：40px；
底部：-40px；
-webkit过渡：所有300ms立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有300毫秒三次贝塞尔（0.645,0.045,0.355,1）；
}
.portfolio.label bg{
背景#e95a44；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
边界半径：5px；
}
.公文包.标签文本{
颜色：#fff；
位置：相对位置；
z指数：500；
填充：5px 8px；
字体大小：16px；
}
.公文包.文本类别{
显示：块；
字体大小：12px；
}
.portfolio:hover.label{
底部：0；
}
.投资组合：悬停img{
顶部：0px；
}
/*#平板电脑（肖像）*/
@仅介质屏幕和（最小宽度：768px）和（最大宽度：959px）{
.集装箱1{
宽度：768px；
}
}
/*#移动式（纵向）-注：设计宽度为320px*/
@仅介质屏幕和（最大宽度：767px）{
.集装箱1{
宽度：95%；
}
#投资组合{
宽度：48%；
利润率：1%；
}
#广告{
显示：无；
}
}
/*#移动（景观）-注：设计宽度为480px*/
@仅介质屏幕和（最小宽度：480px）和（最大宽度：767px）{
.集装箱1{
宽度：70%；
}
#广告{
显示：无；
}
}
/*#清理*/
/*自清善*/
.集装箱1：之后{
内容：“\0020”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}
.clearfix:之前，
.clearfix:之后，
.罗：之前，
.罗：之后{
内容：'\0020'；
显示：块；
溢出：隐藏；
可见性：隐藏；
宽度：0；
身高：0；
}
.罗：之后，
.clearfix:之后{
明确：两者皆有；
}
一行
.clearfix{
缩放：1；
}
.清楚{
明确：两者皆有；
显示：块；
溢出：隐藏；
可见性：隐藏；
宽度：0；
身高：0；
}

与团队会面
我们总是从目标开始；事实证明，我们的领导团队是专业知识、创造力和怪癖的完美结合

领导团队
创造性的
支持

她的名字
主席:

试试这个

.portfolio img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
-webkit过渡：所有600ms立方贝塞尔（0.645,0.045,0.355,1）；
过渡：所有600ms立方贝塞尔（0.645,0.045,0.355,1）；
}

您可以使用flexbox实现这样的功能。最好使用一个响应性的工具来支持扩展。我将其设置为25%，正如您给出的示例所示

html{
溢出y：滚动；
}
身体{
字体系列：Helvetica、Arial、Verdana；
背景：#efefurl（“”）；
背景尺寸：封面；
利润率：15px0；
字体大小：12px；
}
#信息{
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
背景#fcf8e3；
边框：1px实心#fbeed5；
宽度：95%；
最大宽度：900px；
保证金：0自动40px自动；
字体系列：arial；
字体大小：13px；
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
}
#信息包装器{
填充：10px；
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
}
#信息a{
颜色：#c09853；
文字装饰：无；
}
#信息p{
保证金：5px0；
}
.集装箱1{
位置：相对位置；
宽度：960px；
身高：100%；
保证金：0自动；
-webkit过渡：所有1s轻松；
-moz转换：所有1秒轻松；
-o-过渡：所有1容易；
过渡：所有的1容易；
}
#过滤器{
利润率：1%；
填充：0；
列表样式：无；
}
#过滤力{
浮动：中心；
显示：内联块；
}
#李斯潘{
显示：块；
填充：5px20px；
文字装饰：无；
颜色：#666；
光标：指针；