gpt4 book ai didi

html - 浏览器放大或缩小时填充会发生变化

转载 作者:太空宇宙 更新时间:2023-11-04 14:44:48 25 4
gpt4 key购买 nike

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

0 Zoom

With Zoom

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

汽车视频的位置是绝对的汽车元素的位置是相对的汽车图像是静态的

最佳答案

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

我不知道您的代码是什么样的,所以这里是一个基本示例,说明如何使用绝对定位完成上图所示的内容。我使用了 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;
}

关于html - 浏览器放大或缩小时填充会发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17974877/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com