Question

不知何故，我似乎一次又一次地遇到关于该图像矩阵示例的问题，并与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);
            }
        }
    }
}

Answer 1

我敢打赌，你的问题来自于浮动包裹图片的a标签。浮动时，它会创建一个新的布局上下文。如果未设置宽度，浮动将折叠到可能的最小尺寸。您的img设置width: 100%;被视为折叠a的100％，而不是li的100％。您也可以移除浮动广告，也可以在width: 100%;上设置a。

尝试放大浏览器窗口时，响应式图像无响应

1 个答案: