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.
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
I have tried different methods of
HTML, but neither are my greatest strengths.
Best How To :
If I understand correctly what you want to achieve is something like this (uncommenting
/*overflow: hidden;*/): DEMO
margin: 100px auto;
border: 3px solid red;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
Note: I comment
overflow: hidden; so you can see how the image is positioned.