Nivo Slider custom height/width problems

I have searched for a resolution to my problem, but have not yet been successful.

I have images of different sizes in Nivo Slider, but I need to create a viewport that displays the image centered in a div. It’s hard to explain, but I have included a diagram below.

Read More

The image must be centered in a div, while the div must also be responsive. I don’t want the div to change its size and would like the image to create an overflow that is hidden on the div.

Nivo slider test image

I have tried different methods of CSS and HTML, but neither are my greatest strengths.

Related posts

1 comment

  1. If I understand correctly what you want to achieve is something like this (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: I comment overflow: hidden; so you can see how the image is positioned.

Comments are closed.