Geek Answers Handbook

Custom height and width problems Nivo Slider

I was looking for a solution to my problem, but have not yet achieved success.

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

The image should be centered in the div , and the div should also be responsive. I do not want the div to resize, and I want the image to create an overflow that is hidden on the div .

Nivo slider test image

I tried different CSS and HTML methods, but none of them is my forte.

+5
source share
1 answer

If I understand correctly what you want to achieve, it 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 on overflow: hidden; so that you can see how the image is located.

+2
source

More articles:


All Articles