Question

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

问题是我的图像没有以正确的尺寸显示;左右边缘被剪掉了。当我使用Chrome进行检查时，它会报告我的主列（.span_5_of_10）是613px宽，因为它应该是，并且carouFredSel的包装div的大小相同，但posterCarousel div的宽度为661px。我无法弄清楚原因。

我可以将CSS中图像的宽度设置为661px并修复所有内容，但我的设计不会响应。如何让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();
});

问题解决了！

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

1 个答案: