Các vấn đề về chiều cao/chiều rộng tùy chỉnh của Nivo Slider

Question

Tôi đã tìm kiếm giải pháp cho vấn đề của mình nhưng chưa thành công.

Tôi có hình ảnh có kích thước khác nhau trong Nivo Slider, nhưng tôi cần tạo một viewport hiển thị hình ảnh ở giữa div. Thật khó để giải thích, nhưng tôi đã bao gồm một sơ đồ dưới đây.

Hình ảnh phải được căn giữa trong div, trong khi div cũng phải được đáp ứng. Tôi không muốn các div để thay đổi kích thước của nó và muốn hình ảnh để tạo ra một overflow được ẩn trên div.

Tôi đã thử phương pháp khác nhau của CSS và HTML, nhưng không phải là thế mạnh lớn nhất của tôi.

Answer 1

Nếu tôi hiểu đúng những gì bạn muốn đạt được là một cái gì đó như thế này (uncommenting /*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; 
} 

Note : Tôi nhận xét overflow: hidden; vì vậy bạn c xem hình ảnh được định vị như thế nào.