全宽全高固定幻灯片放映图像(<img>)响应性好，始终居中

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

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

   .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;
   }