gpt4 book ai didi

html - 图像边框宽度加起来等于图像大小(仅在 Chrome 中)

转载 作者:行者123 更新时间:2023-11-28 01:02:03 24 4
gpt4 key购买 nike

我制作了一个供图像使用的 map ,但是当我尝试单击指定区域时,在图像上有边框时,该区域会按边框的宽度向左上方移动。

我怀疑边框的宽度添加到图像的宽度和高度。据我所知,这只发生在 Chrome 中。这是代码:

<html>
<head>
<title>TEST</title>
</head>
<map name="map1">
<area shape="rect" coords="11,33,42,68" href="https://www.google.com/">
</map>
<style>
#imgStyle{
border:20px solid black;
border-image: url("border.png") 60 round;
}
</style>
<body>
<img src="start.gif" usemap="#map1" id="imgStyle">
</body>
</html>

有什么办法可以解决这个问题吗?

最佳答案

使用 box-sizing 属性将边框大小包含在元素的总大小中:

    #imgStyle{
border:20px solid black;
border-image: url("border.png") 60 round;
box-sizing:border-box;
}
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="imgStyle" style="width:200px;"

关于html - 图像边框宽度加起来等于图像大小(仅在 Chrome 中),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52592132/

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