Question

我正在为我开发的应用创建一个网站。网站的背景图像，我在桌面上的iPhone上显示了我的应用程序的主屏幕上的iPhone。我想图像映射背景图像，所以当你点击屏幕它会带你到某个地方。我知道如何成像地图，所以我已经使用<img>标签测试了图像地图。它工作正常;但是，我希望图像具有属性“background-size：cover;”，因此它始终填充屏幕并保持纵横比，不留空白。此属性仅适用于背景图像或<div>标记;不幸的是，你只能在<img>标签上成像地图（我认为）。我一直在研究这个问题。此外，我的图像映射是一个多边形，因此它是唯一的。感谢您提前提供任何帮助。
enter image description here

Answer 1

首先，HTML和CSS没有将图像映射缩放到不同大小的本机方式。但是，有一些Javascript解决方法。请参阅此问题：Responsive image map。

CSS object-fit属性似乎是缩放图像的最佳选择。但是，在撰写本文时，没有版本的Internet Explorer（包括Edge）supports this property。

真的，我认为最好的解决方案是重新考虑你的布局。如有效和广泛兼容的方式所述，可能无法解决这个问题。

所以，这是我的建议：

从背景图片中移除手机并将其设为单独的元素。
使用widely-supported background-size: cover作为背景图片。
使用非旋转的手机图像，并将<a>标记绝对放置在图像顶部，以与屏幕或特定UI元素对齐。
使用CSS transforms旋转和缩放手机。浏览器知道该怎么做，并且还会旋转和缩放链接！

以下是此方法的一个简单示例：http://codepen.io/bvisness/pen/pgrGBr

Answer 2

以下是<map>的全局属性，并且不认为这是您完成工作所需要的。

accesskey
class
contenteditable
contextmenu

data-*  
dir     
draggable   
dropzone    
hidden  
id  
lang    
spellcheck  
style   
tabindex    
title   
translate

我的一些观察结果：

您无法为标记本身添加宽度和高度值

如果链接到的图片的宽度和高度发生变化，地图标签会更改其宽度和高度（请参阅代码段）

无法将自己定位为绝对背景（请参阅片段）

光标只会更改为地图左上角的链接

img {
 border:solid;
width:100% ;
height:100%;
}

map {
position:absolute;
}

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
</map>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRTNx0KWm64q1n3aTNvA6xilTrtDRgTI0wPlxb13mcNn55nahKw"  alt="Planets" usemap="#planetmap">



</body>
</html>

<小时/> 可能的解决方案：

为身体添加背景

使用视口测量允许身体占据整个屏幕（单向）

向主体添加onclick事件，以便在单击主体时重定向

此处摘录

body{
  position:relative;
  background:url("https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQfqyqPka3zuGaR9sVDXDcfHMyNrLQnz3QFkaXcWCc8WX_S_14R");
  background-size:cover;
  border:solid;
  display:block;

  margin:auto;
  width:100wh;
  height:100vh;
  cursor:pointer
}

#full_blown{
  width:100wh;
  height:100vh;
}

<body onclick="location.href='www.google.com'"></body>
<h1>THIS IS SOME </h1>
<p>
There was a cow called boy
</p>

图像映射背景图像？

2 个答案: