全寬和高度固定幻燈片圖像（<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

這是pratictical，有很多背景資料文件。

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