Question

目前，我正在制作一个包含HTML的乐队网站。我的想法是在-tag中有一个横幅，你可以点击单独的成员去一个单独的页面，在＆＃34;关于我们＆＃34; -page。基础工作，但我有2个问题。

如果我向下缩放页面，那么这些页面就会响应，但如果我按比例放大则不再是这样。
整个SVG只能在我的笔记本电脑上使用它完全不起作用的任何其他设备。

我该如何解决这个问题？

这是我现在拥有的相关代码：

B.name

Answer 1

我建议放弃使用可扩展SVG的计划，并且简单地允许通过图像调整框的大小，并将框内的框放在绝对位置以与图像位置对齐。下面的示例非常简单，一旦您获得了百分比位置和宽度，该示例将完美地向上和向下扩展：

＆＃13;

header {
  
  position: relative;
  width: 80vw;
  height: auto;
  margin: 0px auto;
  
}

header img {
  
  width: 100%;
  
}

header a {
  
  position: absolute;
  border: 1px solid red;
  
}

header a#member1 {
  
  width: 23%;
  height: 25%;
  top: 25%;
  left: 13%;
  
}

header a#member2 {
  
  width: 13%;
  height: 55%;
  top: 5%;
  left: 43%;
  
}

header a#member3 {
  
  width: 33%;
  height: 15%;
  top: 35%;
  left: 65%;
  
}

＆＃13;

<header>
  <img src="http://placehold.it/900x300" />
  <a href="#" id="member1">Band Member 1</a>
  <a href="#" id="member2">Band Member 2</a>
  <a href="#" id="member3">Band Member 3</a>
</header>

＆＃13;

请记住，我的所有价值观都只是一些例子，因为我不知道您的实际预期结果应该是什么样的。

SVG不会再次扩展

1 个答案: