Question

我有一个1列/ 3行网格，有3个相同的滑块，每行1个。每个滑块包含相同大小的幻灯片。

我将父容器设置为100vh，每个孩子填满屏幕高度的1/3，屏幕宽度的100％。

我正在努力的是将容器中的图像保持在中心并始终完全可见。从本质上讲，我想让滑块填满整个屏幕的宽度和高度，但幻灯片中的图像始终完全可见，左右两侧都有灵活的填充。现在这些填满每行的整个宽度，但只有部分图像在高度上可见（根据宽高比变化裁剪）

这是我到目前为止所获得的代码（即使它没有给我任何控制台提示并且在我的编辑器中运行得很好，该代码片段似乎也没有正确呈现）：

＆＃13;

<html>
<head>
<title>Page Title</title>

<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.theme.default.min_home_up_6.css">


<style>
.owl-carousel {
width:100%;
}

.grid-1 {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(1,1fr);
  grid-template-rows: repeat(3,1fr);
}

/* items */

.grid-1 div {
  color: white;
  max-height: calc(100vh /3);
  font-size: 0px;
  padding: 0px;
  }

/* specific item styles */

.item-1 {

  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
    width: auto;
  height: auto;
  overflow: hidden;
}

.item-2 {

  grid-column: 1 / span 1;
  grid-row: 2 / span 2;
      width: auto;
  height: auto;
  overflow: hidden;
}
.item-3 {

  grid-column: 1 / span 1;
  grid-row: 3 / span 3;
    width: auto;
  height: auto;
  overflow: hidden;
}

@import "compass/css3";

</style>

</head>
<body>

  <section class="grid-1">
  <div class="item-1">

    <div class="owl-carousel owl-theme">

  <div class="item"><img src="http://via.placeholder.com/150x150"></div>

  <div class="item"><img src="http://via.placeholder.com/150x150"></div>


  </div>

  </div>
  <div class="item-2">

    <div class="owl-carousel owl-theme">

<div class="item"><img src="http://via.placeholder.com/150x150"></div>

<div class="item"><img src="http://via.placeholder.com/150x150"></div>

</div>
  </div>
  <div class="item-3">

    <div class="owl-carousel owl-theme">

<div class="item"><img src="http://via.placeholder.com/150x150"></div>

<div class="item"><img src="http://via.placeholder.com/150x150"></div>

</div>
  </div>
  </div>
</section>





<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.shopify.com/s/files/1/2793/0346/files/owl.carousel.min.js"></script>

<script>

var someFunction = function(){};

(function() {

$('.owl-carousel').owlCarousel({
    center: true,
    items:1,
    loop:true,
    dots: false
})
            })();



someFunction();

</script>

</body>

</html>

＆＃13;

网格轮播图像宽高比缩放问题

0 个答案: