Question

I’m working on a web app where I have an image, and, for lack of a better word, a “view” of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.

The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.

I’ve tried a div with a background image, but that always resizes the image to fit the div. Right now I’m trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.

Help? Thanks in advance!

Answer 1

Sounds like you want something that masks the image and only shows a segment.

Assuming a structure like.

<div class="img-mask">
    <img>
</div>

You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it’s where you want it to be.

.img-mask {
    overflow: hidden;
    height: 200px;
    width: 200px;
}
.img-mask img {
    position: relative;
    top: -25%;
    left: -25%;
}

This should center the image to the mask.