Padding Changes When The Browser Is Zoomed In Or Out

I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the proble

Solution 1:

You will have issues at times when using percentages. This is a good example of when to use absolute positioning.

I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.

You might have to modify your HTML and CSS a little furthor to get it to work in your environment.

http://jsfiddle.net/6C8gT/

Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.

I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.

HTML

<divclass="container"><imgclass="thumb"src="http://lorempixel.com/300/200/" /><span>Video</span></div>

CSS

.container {
    position: relative;
}
.containerimg {
    display: block;
}
.containerspan {
    color: white;
    background-color: black;
    padding: 5px10px;
    position: absolute;
    left: 0;
    bottom: 0;
}