Responsive images get unresponsive when trying to enlarge the browser window

Question

Somehow it seems i run into issues on that image matrix example again and again i deal with in combination with Susy. :/ In preparation of finishing the project by applying media queries to it making things responsive i initially inspected the current state and resized the browser window. There happened the following:

https://dl.dropbox.com/u/8578/Resize.mov

Both shown image matrices consist of raster images. The black image matrix resizes and enlarges without a problem. But the second matrix has issues on enlarging again. Is that a plain CSS issue or more Susy related? And is there a way to fix it? :/

The basic Susy settings are:

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

For images the following was applied:

img{
    width:100%;
    max-width: 100%;
    height:auto !important;
}

The HTML part for the first matrix looks like that (i've entered only one li element - the other 27 differ only in title and linked images):

<ul class="customers sectionwrap">
    <li><a><img title="Company" src="img/logo.png" alt="Logo" /></a></li>
</ul>

The Susy and layout relevant CSS parts for the first matrix (7x4) look that way:

.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);}   
            }   
        }
    }
}

The HTML part for the second matrix looks like that (i've entered only one li element - the other 8 differ only in title and linked images):

<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>

The Susy and layout relevant CSS parts for the second matrix (3x3) look that way - they are split because they are located in different partials:

.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

I'd bet that your problem comes from floating the a tags that wrap the images. When you float something it creates a new layout context. If you don't set a width, the float collapses to the smallest possible size. Your img setting width: 100%; is figured as 100% of the collapsing a rather than 100% of the li. You can either remove the float or set width: 100%; on the a as well.