居中幻灯片图像

Question

我正在使用Cycle2轮播插件，我的所有图像宽度都不同，这就是为什么我想将图像居中，但是我想知道我的父包装器宽度是否为900px（例如），并且我的图像不是900px会居中吗？

我的意思是如果我的图像大于9​​00像素而不是什么（不居中），但是如果我的图像小于900像素而不是它们居中

让我在影像上向您展示

 $(document).ready(function(){ $('.mySlideShow').cycle({ next: "#single-right", pauseOnHover: true, pager: "#single-pager", pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>", prev: "#single-left", }); }); 

 .single-gallery{ width:800px; height:640px; position:relative; } .cycle-slideshow img { height:494px; width:auto; } #single-pager a img { width: 49.3px !important; height:49.3px !important; border: 1px solid #fff; } #single-pager a.cycle-pager-active img { opacity: 0.4; } #single-left, #single-right { position: absolute; top: 50%; z-index: 1000; background: rgba(255, 255, 255, .8); padding: 12px; cursor: pointer; } #single-left { left: 0; } #single-right { right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script> <div class="single-gallery"> <div class="mySlideShow"> <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg"> <img src="https://cdn.pixabay.com/photo/2017/01/07/20/40/candy-1961536_960_720.jpg"> <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"> <img src="https://cdn.pixabay.com/photo/2017/01/11/11/33/cake-1971552_960_720.jpg"> <img src="https://www.w3schools.com/w3css/img_avatar3.png"> <div id="single-pager" class="center external"></div> <div id="single-next-prev"> <span id="single-left">Prev</span> <span id="single-right">Next</span> </div> </div> </div> 

Answer 1

试试这个代码

    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/css/lightgallery.min.css" rel="stylesheet" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<div class="single-gallery">
  <div class="mySlideShow">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/07/20/40/candy-1961536_960_720.jpg">
    <img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
    <img src="https://cdn.pixabay.com/photo/2017/01/11/11/33/cake-1971552_960_720.jpg">
    <img src="https://www.w3schools.com/w3css/img_avatar3.png">

  <div id="single-pager" class="center external"></div>

  <div id="single-next-prev">
    <span id="single-left">Prev</span>
    <span id="single-right">Next</span>
  </div>
  </div>

</div>

演示