当浏览器放大或缩小时，填充会发生变化 [英] Padding changes when the browser is zoomed in or out

问题描述

我有一个缩略图图像和另一个与缩略图图像重叠的较小图像.但是，当我放大和缩小图像时，填充会更改为较小的重叠图像，并且此问题仅在CHROME浏览器中存在.它与IE和firefox正常工作.我尝试使用百分比设置较小图像的填充值，但问题仍然存在.这是图像.

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.

这是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

推荐答案

使用百分比有时会遇到问题.这是何时使用绝对定位的一个很好的例子.

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

我不知道您的代码是什么样子，因此这是一个基本示例，说明如何使用绝对定位来完成您上面所描绘的内容.我使用了span标签而不是附加的image标签，但是它应该完全一样.

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.

您可能需要稍稍修改HTML和CSS才能使其在您的环境中正常工作.

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

http://jsfiddle.net/6C8gT/

这是更新的jsFiddle( http://jsfiddle.net/6C8gT/1/)使用您的标记，另一个使用标记减少的标记( http://jsfiddle.net/6C8gT/2/).除非您将来有计划，否则您实际上并不需要这些DIV.

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.

我只是做了下面发布的内容，但是修改了CSS以匹配您的HTML.您必须检查jsFiddles.

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;
}

这篇关于当浏览器放大或缩小时，填充会发生变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！