HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法

h2{
	text-align:center;
}
.wrap{
	width:100%;
	overflow:hidden;
}
.browsers{
	background:url(/g/browsers.webp) no-repeat;
	background-size:80% 80%;
	width:100%;
	height:0;
	padding-bottom:20%;
	margin-left:10%;
}
.browsers a{
	width:16%;
	height:0;
	padding-top:20%;
	margin-top:-2%;
	display:inline-block;
	float:left;
}
.browsers a:hover{
	background:#f00;
	opacity:0.2;
}

<h2>可以通过调整浏览器窗口宽度来查看缩放效果</h2><br/><br/>
<div class='wrap'>
	<div class='browsers'>
		<a href='#chrome'></a>
		<a href='#firefox'></a>
		<a href='#safari'></a>
		<a href='#edge'></a>
		<a href='#b360'></a>
	</div>
</div>
<h2>鼠标移到图片上显示链接实际大小和位置</h2>