如何设置图像映射(宽度:100vw;高度:100vh;)?

时间:2017-12-05 14:49:06

标签: html css

我很抱歉这个简单的问题。 我尝试使用此代码为此图像制作图像映射,但不起作用。 我想我不知道如何设置图像映射(宽度:100vw;高度:100vh;) 我想在智能手机屏幕网站上运行它,因为它是全屏高度。 这是我的代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
  <title>Sajjad</title>

  <style>
	body {
  margin: 0;
  padding: 0;
  background-color: #FFFF52
  }
div.img {
  background-image: url('http://s8.picofile.com/file/8313427126/Portrait_icon_text_install_and_close_8.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 100vh;
  }
  
  </style>
  
</head>
<body>

<div>
<img class="img" usemap="#image-map">
</div>

<map name="image-map">
    <area target="" alt="StartAd-Install" title="StartAd-Install" href="http://site.ir/" coords="669,1227,386,1137" shape="rect">
    <area target="" alt="StartAd-Close" title="StartAd-Close" href="http://site.ir/" coords="54,1138,335,1227" shape="rect">
    <area target="" alt="StartAd-Info" title="StartAd-Info" href="http://site.ir/" coords="41,1279,2,1245" shape="rect">
</map>

</body>
</html>

谢谢。

0 个答案:

没有答案