如何在保持对齐的同时使用png调整图像地图的大小？
如何在保持对齐的同时使用png调整图像地图的大小？
提问于 2019-03-29 07:26:24
我最近创建了一个web-portfolio，我正在尝试使用此image-map-resizer创建png文件，以便使用图像映射。但是当我尝试调整窗口大小时，地图并不与png保持对齐。将鼠标悬停在图像地图上时，图像地图会在png的某些部分加下划线。如何才能使这两个保持一致？
我尝试处理css文件中的一些属性，但到目前为止都没有起作用。
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Salvador Lopez Jr.</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="icon" href="images/favicon2.ico">
</head>
<body id="body" onload="scrollLock()">
<div class="flipContainer">
<div class="flipper" id="flip">
<div class="front face">
<img src="images/card_front.png" width="630px" alt="BusinessCardFront" class="center shadow" usemap="#navmap"/>
<map name="navmap">
<div id="undA" onclick="flipToBack(this.id)"><area shape="rect" coords="1480,3255,2330,3480"></div>
<div id="undW" onclick="flipToBack(this.id)"><area shape="rect" coords="3144,3255,3860,3480"></div>
<div id="undC" onclick="flipToBack(this.id)"><area shape="rect" coords="4614,3255,5740,3480"></div>
</map>
</div>
<div class="back face">
<img src="images/card_back2.png" width="630px" alt="BusinessCardBack" class="center shadow" id="scale"/>
<div id="flipArrow"><img style="cursor:pointer" src="images/flip_arrow.png" width="21px" alt="ReturnArrow"/></div>
</div>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="imageMapResizer.min.js"></script>
<script src="portfolio.js"></script>
</body>
</html>CSS
body {
background-color:#f5f5f5;
font-family:'Garamond','EB Garamond',
'Baskerville', 'Baskerville Old Face',
'Hoefler Text', 'Times New Roman',
'serif';
font-size:20px;
overflow-x:hidden;
min-width:100%;
position:relative;
}
section {
position:relative;
margin:auto;
height:100px;
opacity:0;
text-align:justify;
line-height:1.4;
visibility:hidden;
}
img {
max-width:100%;
}
#undA {
position:absolute;
top:24.1vw;
left:-14.5vw;
margin-left:50%;
width:0;
height:0.04vw;
background:black;
-webkit-transition:0.3s;
transition:0.3s;
}
#undW {
position:absolute;
top:24.1vw;
left:-3.05vw;
margin-left:50%;
width:0;
height:0.04vw;
background:black;
-webkit-transition:0.3s;
transition:0.3s;
}
#undC {
position:absolute;
top:24.1vw;
left:6.9vw;
margin-left:50%;
width:0;
height:0.04vw;
background:black;
-webkit-transition:0.3s;
transition:0.3s;
}
#undA:hover {
width:5.28vw;
}
#undW:hover {
width:4.5vw;
}
#undC:hover {
width:7.31vw;
}回答 1
Stack Overflow用户
发布于 2019-03-29 07:33:42
如果你使用bootstrap，只需在你的图像class="img-responsive"上添加类，如果你不这样做，你可以添加css代码width:100%。如果你已经这样做了，但是不起作用，那么在你的css代码的末尾添加!important。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55408353
复制相关文章
相似问题