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 个答案: