0

我有一个缩略图和另一个与缩略图重叠的较小图像。但是当我放大和缩小时，较小的重叠图像的填充会发生变化，并且问题仅存在于 CHROME 浏览器中。它在 IE 和 firefox 上运行良好。我尝试使用百分比来设置较小图像的填充值，但问题仍然存在。这是图像。

0 缩放

带变焦

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

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

4

1 回答 1

1

使用百分比时有时会遇到问题。这是什么时候使用的一个很好的例子absolute positioning。

我不知道你的代码是什么样子的，所以这里是一个基本示例，说明如何使用绝对定位完成上图中的内容。我使用了一个跨度标签而不是一个额外的图像标签，但它应该可以正常工作。

您可能需要进一步修改您的 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;
}
于 2013-07-31T15:54:42.193 回答