Trying to fit carouFredSel in a variable-width container

Trying to fit carouFredSel in a variable-width container

I am trying to create a site using the Responsive Grid System. The width
of the columns depends on the width of the browser window. Within these
columns, I'm putting a carouFredSel slideshow. The intent is to have an
image that fills the width of the column, and use carouFredSel to
crossfade between images.
The problem is that my images aren't showing up at the right size; the
left and right edges are getting clipped off. When I use Chrome to
inspect, it reports that my main column (.span_5_of_10) is 613px wide, as
it should be, and that carouFredSel's wrapper div is the same size, but
the posterCarousel div is 661px wide. I can't figure out why.
I can set the width of the images in the CSS to 661px and that fixes
everything, but then my design won't be responsive. How can I get
carouFredSel to fit in a variable-width container?
Here's my HTML:
<div class="col span_5_of_10">
<div class="posterCarousel">
<img src="img/The-World-Needs-Heroes---Superman.png">
<img src="img/The-World-Needs-Heroes---Knight.png">
<img src="img/The-World-Needs-Heroes---Swashbuckler.png">
</div>
</div>
JavaScript at the bottom of the document:
<script type="text/javascript">
$(document).ready(function() {
/* CarouFredSel: a circular, responsive jQuery carousel.
Configuration created by the "Configuration Robot"
at caroufredsel.dev7studios.com
*/
$(".posterCarousel").carouFredSel({
width: "100%",
items: {
width: "100%"
},
scroll: {
fx: "crossfade",
pauseonhover: true
},
auto: 3000
});
});
</script>
And the CSS controlling my images:
.posterCarousel img {
width: 100%;
z-index: 0;
position: relative;
margin: 0;
}