固定幅のスライドショー画像（<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; 
    }