Question

所以我有一个幻灯片，图片不是背景图片，它们是内联img标签，我希望幻灯片显示在这个模板上：http://www.templatemonster.com/demo/52603.html

我需要它具有响应性，全宽和高度，并始终水平和垂直居中，从顶部到底部以及从右侧从左侧裁剪相同的量。

我一直在研究并且主要找到背景图片的答案。如果这是一张背景图片，我会知道怎么做....

我可以使用css和jquery，但最好只使用css。

这是html：

<div class="cycle-slideshow" id="cycle-slideshow">
  <a href="http://www.facebook.com/" class="cycle-slide cycle-sentinel">
    <img src="http://teste.boleiafacil.com/img/empresa_teste__home_1.jpg" alt="">
  </a>
  <span class="cycle-prev">&lt;</span>
  <span class="cycle-next">&gt;</span>
  <span class="cycle-pager"><span class="">•</span><span class="">•</span><span class="cycle-pager-active">•</span></span>
  <a href="http://www.facebook.com/" class="cycle-slide">
    <img src="http://teste.boleiafacil.com/img/empresa_teste__home_1.jpg" alt="">
  </a>
  <a href="http://www.facebook.com/" class="cycle-slide">
    <img src="http://teste.boleiafacil.com/img/empresa_teste__home_2.jpg" alt="">
  </a>
  <a href="http://www.facebook.com/" class="cycle-slide cycle-slide-active">
    <img src="http://teste.boleiafacil.com/img/empresa_teste__home_3.jpg" alt="">
  </a>
</div>

Answer 1

为什么不使用自举旋转木马？

http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

它是实用的，并且有很多背景文档。

Answer 2

使用图片而不是背景，并不能保证你永远不会得到信箱 - 你可以使用这样的东西来接近！

   .cycle-slide{
     width: 100%;
     height: 100%;
     position: relative;
     display: block;
     overflow: hidden;
   }
   .cycle-slide img{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-height: 100%;
     width: auto;
     height: auto;
   }

全宽和高度固定幻灯片图像（<img/>）响应并始终居中

2 个答案: