Nivo滑塊自定義高度/寬度問題

Question

我已經搜索瞭解決我的問題，但尚未成功。

我在Nivo Slider中有不同尺寸的圖像，但我需要創建一個viewport，以div爲中心顯示圖像。這很難解釋，但我在下面列出了一張圖。

圖片必須以div爲中心，而div也必須具有響應性。我不想div更改其大小，並希望圖像創建一個overflow隱藏在div。

我已經試過的CSS和HTML不同的方法，但也不是我的最大優點。

Answer 1

如果我理解正確的話，你想達到什麼是這樣的（在取消/*overflow: hidden;*/）：DEMO

HTML：

<div> 
    <img src="http://i.imgur.com/cjgKmvp.jpg"/> 
</div> 

CSS：

div{ 
    position: relative; 
    margin: 100px auto; 
    width: 400px; 
    height: 300px; 
    border: 3px solid red; 
    /*overflow: hidden;*/ 
} 

img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    -ms-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -1; 
} 

注：我評論overflow: hidden;所以你c看看圖像如何定位。