Question

/*
* rwdImageMaps jQuery plugin v1.5
*
* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
*
* Copyright (c) 2013 Matt Stow
* https://github.com/stowball/jQuery-rwdImageMaps
* http://mattstow.com
* Licensed under the MIT license
*/
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);

<HEAD>
	<title> Nicolas Marin: Pagina principal</title>
	<style>
	img[usemap]{
	min-width: 100vmin;
	max-height: 75vw;
	height: 100vmin;
	width: auto;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
	}
	</style>
</HEAD>

<BODY>
	<map name="mapa">
	<area shape="rect" alt="Salidas" title="" coords="726,356,932,434" href="https://picasaweb.google.com/nicolas.marin" target="" />
	<area shape="rect" alt="Relatos" title="" coords="726,473,933,552" href="relatos.htm" target="" />
	<area shape="rect" alt="Otros" title="" coords="725,591,930,669" href="otros.htm" target="" />
	<area shape="rect" alt="Más Diseños" title="" coords="414,591,622,671" href="mas_disenos.htm" target="" />
	<area shape="rect" alt="Esquemas" title="" coords="413,473,623,552" href="esquemas.htm" target="" />
	<area shape="rect" alt="Tablas" title="" coords="412,355,624,439" href="tablas.htm" target="" />
	<area shape="rect" alt="Libros" title="" coords="96,355,304,434" href="libros.htm" target="" />
	<area shape="rect" alt="Artículos" title="" coords="96,470,304,553" href="articulos.htm" target="" />
	<area shape="rect" alt="Docente" title="" coords="97,591,303,670" href="docente.htm" target="" />
	<area shape="rect" alt="Banner" title="" coords="24,32,930,149" href="personal.htm" target="" /></map>
	

	<body style="background-color:#BDBDBD">
	
		<img src="Diapositiva1.PNG" usemap="#mapa", border="0">
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="jquery.rwdImageMaps.min.js"></script>
	<script>
		$(document).ready(function(e) {
			$('img[usemap]').rwdImageMaps();
		});
	</script>
</BODY>

我有一个基于单独图像的网络，图像地图通过jquery脚本调整大小，目的是保持图像全屏但没有变形（也就是说：将图像拉伸到屏幕保持纵横比）I使用vmin和vmax值使用了一些最小宽度和最大高度，将图像完全按照我想要的方式调整到屏幕，但是不要让我放大或缩小，这就是我的问题。

¿如何绕过此问题才能放大页面？或者在其他情况下¿有没有其他方法可以使用图像地图缩放器调整图像全屏，宽高比和功能？

感谢任何人，这是我的图像css：

img[usemap]{
min-width: 100vmin;
max-height: 75vw;
height: 100vmin;
width: auto;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
position: fixed;
right: 0;
top: 0;
}

我正在使用来自https://github.com/stowball/jQuery-rwdImageMaps

的图片地图缩放器

感谢大家，祝你有个美好的一天！

我最小高度的图像无法缩放

0 个答案: