1

不知何故,我似乎一次又一次地遇到了与 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);
            }
        }
    }
}
4

1 回答 1

1

我敢打赌,您的问题来自浮动a包装图像的标签。当您浮动某些东西时,它会创建一个新的布局上下文。如果您不设置宽度,浮动将折叠到可能的最小尺寸。您的img设置width: 100%;被认为是 100% 的折叠a而不是 100% 的li. 您可以删除浮动或设置width: 100%;a

于 2012-11-03T08:40:15.847 回答