调整大小横幅上的链接

Question

我想在横幅上设置一个链接，根据屏幕的宽度调整大小。

目前我已经提供了完整图片的链接，例如this。

我只想点击“点击这里”按钮区域。

代码

<div class="outer">
  <a href="http://google.com/" >
    <img src="http://s11.postimg.org/damg257c3/test.jpg" alt="" />
  </a>
</div>

Answer 1

您可以像this一样尝试。

设置position: absolute并将left中的top %设置为link

为了理解我已将opacity: 0.5;设置为link

HTML

<div class="outer">
    <img src="http://s11.postimg.org/damg257c3/test.jpg" alt="" />
  <a class="link" href="http://google.com/" ></a>
</div>

CSS

* {
  margin: 0;
}
img {
  max-width: 100%
}
.outer {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.link {
  background: red;
    display: block;
    height: 12%;
    left: 24%;
    opacity: 0.5;

    position: absolute;
    top: 81%;
    width: 17%;
}