Is it possible to display a Picturefill image without any bars and span residuals with the intrinsic ratio mixin?

[rpkoller]

I've tried around quite a bit but somehow it is kind of tricky to apply the intrinsic ratio mixin to a picturefill markup. If I try a single image everything lays out fine.

<div class="ir">
    <img src="/img/fp-580x270.jpg" alt="fp">
</div>

.ir {
    @include intrinsic-ratio(2.14814815, 100%);
}
*, *:before, *:after {
outline: 1px solid red;
}
body,
html {
    height:100%;
    line-height:1.4;
    padding:0;
    margin:0;
    background:lightyellow;
}

.container {
     max-width:750px;
     margin: 2em auto 0 auto;
}
img {
    width:100%;
    max-width:100%;
    height: auto;
}

a clean display - a wrapping div the ratio mixin is applied to - all fine. But the problem is on the picturefill side you dont have a single wrapping element but subelements as well. I tried to bypass by adding the class name to the inner spans and ended up with an empty box

<span data-picture data-alt="fp">
    <span class="intrinsic" data-src="/img/fp-338x157.jpg"></span>
    <span class="intrinsic" data-src="/img/fp-507x236.jpg" data-media="(min-device-pixel-ratio: 1.5)"></span>
    <span class="intrinsic" data-src="/img/fp-676x315.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
    <noscript>
        <img src="/img/fp-loesungen-1160x540.jpg" alt="fp">
    </noscript>
</span>

If I added the selector to the outer span and removed the intrinsic class from the inner, using an attribute selector .intrinsic[attr^=data-alt] for the mixin I ended up with an image displayed:

On the downside there is still an empty bar beneath the image in contrast to the "regular" image from the beginning as well as the outline for an empty span. Is there a way to display an Picturefill image in the same clean manner like the first image? Best regards Ralf

[rpkoller]

Ok i got things working finally. i had to add display:block to the parent element for a picturefill image:

<span class="intrinsic-picturefill" data-picture data-alt="fp">
    <span data-src="/img/fp-338x157.jpg"></span>
    <span data-src="/img/fp-507x236.jpg" data-media="(min-device-pixel-ratio: 1.5)"></span>
    <span data-src="/img/fp-676x315.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
    <noscript>
        <img src="/img/fp-loesungen-1160x540.jpg" alt="fp">
    </noscript>
</span>

.intrinsic-picturefill {
    @include intrinsic-ratio(2.14814815, 100%);
    display:block;
}

then the border and the empty box were gone. here is an example: first is a regular intrinsic img second is an intrinsic picturefill one - both have the identical extends now.