试图将 carouFredSel 放入可变宽度的容器中答案

【问题标题】：Trying to fit carouFredSel in a variable-width container试图将 carouFredSel 放入可变宽度的容器中
【发布时间】：2013-09-14 23:57:30
【问题描述】：

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

问题是我的图片没有以正确的尺寸显示；左右边缘被剪掉。当我使用 Chrome 进行检查时，它报告我的主列 (.span_5_of_10) 是 613px 宽，应该是这样，并且 carouFredSel 的 wrapper 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;
}

【问题讨论】：

标签： jquery html css responsive-design caroufredsel

【解决方案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();
});

问题解决了！

【讨论】：