Question

此代码适用于Carousal，这些项目以Java脚本的形式添加到Carousal中。当我重新调整屏幕大小时，因为我指定overflow = hidden，我的某些部分图像不会显示或图像的某些部分被隐藏。

HTML

<div class="line">
 <div class="s-12 l-6 margin-bottom"  style="position: inherit; margin: 3px; width:inherit; overflow: hidden;">
         <div id="owl_demo1" class="owl-carousel owl-theme  margin-bottom" runat="server">
         </div>
   </div>

CSS

.owl-item
        {
            width:100%;
        }
      .carousol_image {
            /*height: 100%;*/
            height:450px;
            width: 100%;
        }
        .overlay {
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            background-color: red;
            opacity: 0.5;
        }

        .item {
            position: relative;
        }

        .figure_margin {
            margin: 0;
        }

        .title {
            font-size: 2em;
        }

        .titlebar {
            background: #333333;
            height: 80px;
            padding: 15px 20px;
            color: #FFFFFF;
        }

Java脚本

 $(document).ready(function () {

     $("#ctl00_ctl34_g_7a36e625_9f77_476b_aa4e_cc2258d2847d_ctl00_owl_demo1").owlCarousel({
         navigation: true,
         slideSpeed: 300,
         paginationSpeed: 400,
         autoPlay: true,
         singleItem: true
     });

     $(".owl-controls").css("width", $(".owl-item").width());

     $("suiteBar").hide;


 });

Answer 1

使用媒体查询，而不是仅将宽度设置为100％

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Div应该在屏幕尺寸上增长和缩小？

1 个答案: