0

我正在尝试在我的图像上创建一个特定的可点击位置。图像大小会根据浏览器的大小动态调整，所以我也需要可点击的框来做到这一点。我创建了一个框来包含我的图像（不确定是否有必要），并认为如果我在该容器中制作了一个框（a.resume），它将相对于图像进行调整。但是，该框似乎是在容器外部创建的，位于右侧的屏幕外。

下面是CSS：

#banner {
    width: 100%;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

img.banner {
    max-width: 100%;
    height: auto;
    width: auto;
}

a.resume {
    top: 20%; 
    left: 35px; 
    width: 60%; 
    height: 28%;
    position: relative; 
    background-color: black; /* to see where my box is */
    display:block;
}

下面是 HTML：

<body>
<div id="banner">
    <img src="banner.png" class="banner" />
    <a href="banner1.png" class="resume" />
</div>
</body>

另外，如果您能告诉我是否可以简化 CSS 或 HTML 中的任何内容，我将不胜感激。我是新手，我可能会让它们复杂化。

4

1 回答 1

2

您需要使用 HTML 地图标记。你可以在这里了解它

于 2013-07-21T02:50:43.140 回答