2

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

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

1 回答 1

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();
});

问题解决了！

于 2013-09-12T02:54:40.080 回答