To experience the problem, go to the demo site, reduce the browser window to something below 1200px and hover on the first image on the right. You'll see the scaling image partially going out of the viewport horizontally .The same applies in vertically manner on images near the bottom or top of the viewport.

We would prefer a CSS only solution. If this is not possible, use jQuery. Also hints and links to complete solutions are welcome. Be aware the image is in the HTML of the page, not a CSS background property.

Comments

lolandese’s picture

lolandese commented
Issue summary: View changes
Issue tags: +CSS

This comes close to what we are after, except that we would need to shift the position only the necessary to keep the image in the viewport. The provided demo centers it in the containing div (still nice though). It does not prevent to go out of the viewport the containing div inside the viewport is small. Mostly occurring in a vertical sense.

Also to experiment with:
viewport units

lolandese’s picture

lolandese commented
Issue tags: +ninja