0
我在創建以下概念時遇到了問題。我想要映射網站圖片的特定部分以鏈接到網站中的另一個頁面,並且我希望整個圖片能夠伸展到查看器的寬度。我有這兩個,但是當圖像延伸時,它會拋出映射。有沒有辦法讓它自動補償?無法獲取按鈕,這是工作背景的一部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
* { margin: 0; padding: 0; }
#bg { position: relative; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width()/$bg.height();
function resizeBg() {
if ((theWindow.width()/theWindow.height()) < aspectRatio) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
</script>
</head>
<body>
<img src="background.png" id="bg" usemap = #bgmap alt="">
<map name=bgmap>
<area shape=Rect Coords=410,200,595,390 Href="http://www.example.com">
</map>
</body>
</html>
檢查了這一點http://jsfiddle.net/JpgYm/8/ –