Question

我正在尝试为我的网站制作社交媒体页面，我希望将不同的社交媒体图标链接到我的每个社交媒体页面。我尝试使用地图标记，但图像分辨率会根据浏览器而变化。我明白，如果我把它作为一个绝对的图像，它可以解决这个问题，但使用绝对坐标似乎是一个非常有缺陷的设计。有没有办法用网址标记图标，无论屏幕分辨率如何，都会保持固定在正确的位置？

这是我正在谈论的图标的图像：

谢谢！

Answer 1

一个solotiun可以使用html的MAP标记（它的跨浏览器），this等网站可以帮助您获得正确的坐标，请参阅此{{3} }。但是这种方式并不是真正响应，我建议你使用DEMO（有一个this JQuery plug-in）让make <map>标记更具响应性。

＆＃13;

$(document).ready(function(){
    $('img[usemap]').rwdImageMaps();
});

＆＃13;

/* You can see that it's responive */
img {
    width: 300px;
    height: 380px;
}

＆＃13;

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="http://i.stack.imgur.com/sMtTr.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="instantgram" href="#" shape="rect" coords="77,346,177,447" />
    <area alt="" title="gmail" href="#" shape="rect" coords="203,576,314,683" />
    <area alt="" title="..." href="#" shape="rect" coords="474,579,582,688" />
    <area alt="" title="..." href="#" shape="rect" coords="605,344,716,451" />
    <area alt="" title="..." href="#" shape="rect" coords="471,104,582,216" />
    <area alt="" title="..." href="#" shape="rect" coords="205,106,319,216" />
</map>
</body>
</html>

＆＃13;

Answer 2

你好请Check my solution：

HTML
<div class="social_media">
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm facebook">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm twitter">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm tripadvisor">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm google">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm instagram">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm youtube">
    </a>
</div>

然后

CSS
.social_media {
  position: relative;
  width: 15rem;
  height: 15rem;
  box-sizing: border-box;
  margin: 5em auto;
  border: 5px solid rgba(100, 100, 100, 0.65);
  border-radius: 50%;
}

.social_item img {
   text-decoration: none;
   position: absolute;
   font-size: 3rem;
   color: steelblue; 
}

[class*="sm"] {
  width: 3rem;
  height: 3rem; 
}

[class*="facebook"],
[class*="twitter"] {
  top: 0px;
}

[class*="instagram"],
[class*="tripadvisor"] {
  top: calc(15rem / 2 - 3rem / 2);
}

[class*="instagram"] {
  left: calc(-3rem / 2); 
}

[class*="tripadvisor"] {
  left: calc(15rem - 3rem / 2); 
}

[class*="google"],
[class*="youtube"] {
  top: calc(15rem - 3rem); 
}

[class*="facebook"],
[class*="youtube"] {
  left: calc((15rem - 3rem) - (3rem / 2));
}

[class*="twitter"],
[class*="google"] {
  left: calc(3rem / 2);
}

一旦你有了这个，你会得到这样的东西：

最终确定：

您需要做的唯一更改是更改相应社交媒体徽标的 img src =“。/ facebook-256.png” ，同时添加您的社交 a href =“”

中的媒体链接

感谢 T04435

Answer 3

正如我在评论中提到的，这可以以一种反应良好的方式完成：

<强> Fiddle demo

#social-wrapper {
  background: #eee;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  margin: 5% auto;
  border: 5px solid rgba(100, 100, 100, 0.65);
  border-radius: 50%;
  position: relative;
}
.social-icon {
  position: absolute;
  width: 80px;
  height: 80px;
  background: url(http://placehold.it/80x80);
}
.social-icon:nth-child(1) {
  top: calc(8% - 40px);
  left: calc(24% - 40px);
}
.social-icon:nth-child(2) {
  top: calc(8% - 40px);
  left: calc(76% - 40px);
}
.social-icon:nth-child(3) {
  top: calc(50% - 40px);
  left: calc(100% - 40px);
}
.social-icon:nth-child(4) {
  top: calc(92% - 40px);
  left: calc(76% - 40px);
}
.social-icon:nth-child(5) {
  top: calc(92% - 40px);
  left: calc(24% - 40px);
}
.social-icon:nth-child(6) {
  top: calc(50% - 40px);
  left: -40px;
}

<div id="social-wrapper">
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
</div>

将锚点中的每个图标包裹起来并根据需要进行链接。

将图片的不同部分链接到不同的网址

3 个答案:

然后

一旦你有了这个，你会得到这样的东西：

最终确定：

感谢 T04435