CODEWITHSUNDEEP
htmlcsszoomingresize-image
ChaimKut
ChaimKut

Reputation: 2809

Maintain image layout on a webpage even after zoom?

I currently have three images placed horizontally one after another on a webpage. When the user zooms in sufficiently, the page layout bumps the third image to be placed below the first two images. I would prefer that the image simply 'disappears' into the edge of the page so that the layout is maintained. How can I specify this behavior? Thank you.

Upvotes: 0

Views: 3065

Answers (3)

Monika Singh
Monika Singh

Reputation: 1

You can put overflow:hidden;..this will hide the third image when zoom in or out takes place. 2ndly fix the width of wrapper and all three images and put float on img div.but keep 3rd div width little less as compare to other.

Upvotes: 0

Robert Koritnik
Robert Koritnik

Reputation: 105029

Put into container and prevent wrapping

<div style="white-space: nowrap;">
    <img ... />
    <img ... />
    <img ... />
</div>

It is of course wiser to use CSS classes instead of inline styles.

And if you'd like to keep container unscrollable, you can set its overflow style to hidden.

Here's a JSFiddle example that sets both styles on containing div element so third element (insetad of images I've used span but that's not relevant) simply disappears over the edge. If you try to set span width to fixed pixel size and zoom the page in you will see that elements just disappear over the edge.

Upvotes: 1

Hubro
Hubro

Reputation: 59333

Set a fixed width to body or a site wrapper div. That way the size of the browser should have no effect on the elements of your site.

Upvotes: 1

Related Questions