不知何故，我似乎一次又一次地遇到了与 Susy 一起处理的图像矩阵示例的问题。:/ 在准备通过应用媒体查询来完成项目时，我最初检查了当前状态并调整了浏览器窗口的大小。发生了以下情况：
https://dl.dropbox.com/u/8578/Resize.mov
两个显示的图像矩阵都由光栅图像组成。黑色图像矩阵可以毫无问题地调整大小和放大。但是第二个矩阵再次放大有问题。这是一个普通的 CSS 问题还是更多与 Susy 相关的问题？有没有办法解决它？：/
基本的 Susy 设置是：
$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;
对于图像，应用了以下内容：
img{
width:100%;
max-width: 100%;
height:auto !important;
}
第一个矩阵的 HTML 部分如下所示（我只输入了一个 li 元素 - 其他 27 个仅在标题和链接图像上有所不同）：
<ul class="customers sectionwrap">
<li><a><img title="Company" src="img/logo.png" alt="Logo" /></a></li>
</ul>
第一个矩阵（7x4）的 Susy 和布局相关的 CSS 部分看起来是这样的：
.customers {
@include with-grid-settings($gutter: 0.1%){
li {
margin-right: -100%;
@include span-columns(2,14);
@include nth-omega(7n);
@for $g from 1 through 28
{
&:nth-child(#{$g}){@include push(0);}
}
}
}
}
第二个矩阵的 HTML 部分如下所示（我只输入了一个 li 元素 - 其他 8 个元素仅在标题和链接图像上有所不同）：
<ul class="moodlegrid sectionwrap">
<li><a class="ajax1" href="projekt1.html"><img title="Projekt1" src="img/1.jpg" alt="Projekt1" /><img title="Projekt1" src="img/2.jpg" alt="Projekt1" /><span class="spiceup">Zum Projekt</span></a></li>
</ul>
第二个矩阵（3x3）的 Susy 和布局相关的 CSS 部分看起来是这样的——它们被分割了，因为它们位于不同的部分：
.moodlegrid{
@include with-grid-settings($gutter: 0.8%){
li{
margin-right: -100%;
@include trailer(1 / 2);
@include span-columns(6,18);
@include nth-omega(3n);
@for $i from 1 through 9
{
&:nth-child(#{$i}) {@include push(0);}
}
}
}
}
.moodlegrid{
li{
a{
position: relative;
float:left;
display:block;
img:nth-child(1){
float:left;
display:block;
}
img:nth-child(2){
display: none;
}
span{
display:none;
}
}
a:hover{
img:nth-child(2){
display: block;
position: absolute;
z-index: 100;
top:0;
left:0;
}
span{
display: block;
position: absolute;
text-align:center;
top: 42%;
left: 34%;
z-index:101;
padding: 0.24em;
@include border-radius(5px, 5px);
@include box-shadow(black 2px 2px 10px);
}
}
}
}