我如何調整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