我如何调整Div幻灯片Jquery的大小

Question

我希望幻灯片放到我的封面网页上，宽度为100％，高度为500px，但这并不是我想要的。img分辨率为“ 1200 * 575”，请帮助

的CSS

#slide{
    width : 100%;
    height: 500px;   
}

的HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>IO-Hope</title>
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script type="text/javascript" src="js/jquery.bcat.bgswitcher.js"></script>
        <link rel="stylesheet" type="text/css" href="StyleHome.css">
    </head>
    <body>
        <div id="slide">
        </div>
        <script class="slidecon" type="text/javascript">
            var srcBgArray = ["./Img/Slide/1.jpg","./Img/Slide/2.jpg","./Img/Slide/3.jpg","./Img/Slide/4.jpg"];
            $(document).ready(function() {
                $('#slide').bcatBGSwitcher({
                    width :'100%' ,
                    height : 500 ,
                    urls: srcBgArray ,
                    effect : "fade", 
                    interval : 5000,
                    loop : true,
                    shuffle : true,
                    links: true,
                    prevnext: true
                });
            });
        </script>
    </body>
</html>

Answer 1

由于滑块使用的是img标签，而不使用背景图像，因此您的选择比较苗条。

我建议，如果您想要完美的图像，则必须裁剪图像以适合滑块，如果此方法不适合您，则可以在滑块上设置高度并隐藏溢出。

#slide {
  height: 525px;
  overflow: hidden;
}
#slide img {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

我如何调整Div幻灯片Jquery的大小

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-09-03 11:00:51

我如何调整Div幻灯片Jquery的大小

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-09-03 11:00:51

解决方案1
0 已采纳 2015-09-03 11:00:51