javascript - 全宽和高度固定的幻灯片图像 () 响应迅速且始终居中

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

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