CODEWITHSUNDEEP
jquerycsssliderjavascript
tobbe
tobbe

Reputation: 1805

Large slideshow/gallery fixed height

Im trying to make my slideshow to behave like this:

  1. If the browser window is wider than or same width as my image - the image should be 100% of the window, but not heigher than 450px (cut overflow). this is pretty easy to do BUT

  2. If the browser window is narrower than my image the image should be centered and then cut of on both left and right side. I still want a fixed height. Like this:

enter image description here

Is there any plugin for this? Ive tried to modify some but cant get nr 2 to work

Upvotes: 0

Views: 154

Answers (1)

AzDesign
AzDesign

Reputation: 1199

Does your image also has fixed width ? If so you can use the solution below :

  1. Create a container that contains your image

    .container { position:relative; height:450px; overflow:hidden; }

  2. Put your image inside the container, then add the following css

    .container img { width:600px; position:relative; left:50%; margin-left:-300px; /* minus half of the width */
    }

this will force the image to get centered against the container, even though the image is larger than the container.

Upvotes: 1

Related Questions