jquery - 尝试将 carouFredSel 放入可变宽度的容器中

Question

我正在尝试使用响应式网格系统创建网站。列的宽度取决于浏览器窗口的宽度。在这些栏目中，我放了一个 carouFredSel 幻灯片。目的是让图像填充列的宽度，并使用 carouFredSel 在图像之间交叉淡入淡出。

问题是我的图像没有以正确的尺寸显示；左右边缘被剪掉了。当我使用 Chrome 检查时，它报告说我的主列 (.span_5_of_10) 宽度为 613px，它应该是这样，并且 carouFredSel 的包装器 div 大小相同，但 posterCarousel div 宽度为 661px。我不明白为什么。

我可以在 CSS 中将图像的宽度设置为 661 像素，这样可以解决所有问题，但我的设计将无法响应。如何让 carouFredSel 适合可变宽度的容器？

这是我的 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:

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

以及控制我的图像的 CSS:

.posterCarousel img {
    width: 100%;
    z-index: 0;
    position: relative;
    margin: 0;
}

Answer 1

我最初想用 CSS 或通过重新配置 carouFredSel 来解决这个问题，但在为这个问题走了一个晚上之后，我决定编写更多 JavaScript 来解决 JavaScript 问题是有意义的。

我写了一个函数来获取列的当前宽度，然后将图像 CSS 设置为适当的值:

function setMainColumnWidth(){
    var mainColumnWidth = $(".span_5_of_10:first").width();
    $(".posterCarousel img").css("width", mainColumnWidth);
}

然后我在页面加载时和每次调整窗口大小时调用此函数:

$(document).ready(function() {
    setMainColumnWidth();
    /* carouFredSel code goes here */
});

$(window).resize(function() {
    setMainColumnWidth();
});

问题解决了!