CODEWITHSUNDEEP
jqueryhtmlcss
BorisD
BorisD

Reputation: 2261

Keep the same position for images with different width?

I have a photo gallery in my website...The photos are in dialog with next,prev,close buttons. Each next/prev event I load a new image into the dialog...Photos have a different width-How can I load the pictures at the same position? I mean because the pictures are with different width the position of the images is changing...

Upvotes: 0

Views: 387

Answers (2)

Wex
Wex

Reputation: 15705

Personally, I think your best option is to try and work with the fact that each image is a different size. Create a transition effect that enlarges and shrinks your slideshow to fit the size of the image within. Makes for a much smoother, more trendy effect - if that's what you're looking for.

Upvotes: 1

Kyle Sletten
Kyle Sletten

Reputation: 5413

If you use some sort of centering, the change in width won't be a problem because they will all be centered correctly. Then all you have to do is position a known-width element that won't change depending on the image.

<div class="viewer">
    <img/>
</div>

.viewer{
    text-align: center;
}
.viewer img{
    margin: auto;
}

Upvotes: 2

Related Questions