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 div
.
I have tried different methods of CSS
and HTML
, but neither are my greatest strengths.
If I understand correctly what you want to achieve is something like this (uncommenting
/*overflow: hidden;*/
): DEMOHTML:
CSS:
Note: I comment
overflow: hidden;
so you can see how the image is positioned.