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 problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist. Here are the images.

0 Zoom

With Zoom

This is the HTML

   <div class="car-item">
                         <div class=" car-image">
                           <img src="/~/media/images/thumb.ashx" alt="Image 1" />
                         </div>

                            <div class="car video">
                                <a href="#">VIDEO</a>
                            </div>

    <div>

position for car video is absolute position for car item is relative and for car-image is static

回答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

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

CSS

.container {
    position: relative;
}
.container img {
    display: block;
}
.container span {
    color: white;
    background-color: black;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
}

来源：https://stackoverflow.com/questions/17974877/padding-changes-when-the-browser-is-zoomed-in-or-out

标签

html

css

google-chrome

css-position