jQuery Cycle - Responsive

HTML

<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="wrap">
    <div class="cycle">
        <img src="http://placehold.it/350x150" alt="Image A" title="This is Image A" />
        <img src="http://placehold.it/350x150" alt="Image B" title="This is Image B" />
        <img src="http://placehold.it/350x150" alt="Image C" title="This is Image C" />
        <img src="http://placehold.it/350x150" alt="Image D" title="This is Image D" />
        <img src="http://placehold.it/350x150" alt="Image E" title="This is Image E" />
    </div>


    <p> Why isnt the cycle clered, and how can i clear it without fixing the height?</p>
</div>
<div class="wrap">
    <div class="cycle2">
        <img src="http://placehold.it/350x150" alt="Image A" title="This is Image A" />
        <img src="http://placehold.it/350x150" alt="Image B" title="This is Image B" />
        <img src="http://placehold.it/350x150" alt="Image C" title="This is Image C" />
        <img src="http://placehold.it/350x150" alt="Image D" title="This is Image D" />
        <img src="http://placehold.it/350x150" alt="Image E" title="This is Image E" />
    </div>


    <p> The cycle is cleared in this example, but its not responsive</p>
</div>

CSS

.cycle, .cycle2 {
    margin:20px;
    background:#fff
}
img {width:100%;}
.wrap {height:300px; margin:5px; padding: 5pc; background:#eee}

JavaScript

$(document).ready(function() {
    
     $('.cycle').cycle({
            fit: 1,
            width: "fit"
    });


    $('.cycle2').cycle({
    });
    
});