浏览器放大或缩小时填充更改

Question

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

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

汽车视频的位置是绝对的 汽车项目的位置是相对的 而对于汽车图像是静态的

Answer 1

使用百分比时，您会遇到问题。这是何时使用absolute positioning的一个很好的例子。

我不知道你的代码是什么样的，所以这里有一个基本的例子，说明如何通过绝对定位完成上面所描绘的内容。我使用了span标签而不是额外的图片标签，但它应该都是一样的。

您可能需要修改HTML和CSS，以便在您的环境中使用它。

http://jsfiddle.net/6C8gT/

以下是更新 jsFiddle（http://jsfiddle.net/6C8gT/1/），它使用您的标记，另一个使用缩减标记（http://jsfiddle.net/6C8gT/2/）。你不需要那些DIV，除非你将来有计划。

我刚刚完成了我在下面发布的内容，但修改了CSS以匹配您的HTML。你必须看看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;
}