关于在javaScript中如何实现当前的图片能够自适应分辨率

一般在我们的开发中，我们会使用到当前的js调用css来美化界面，但是很多时候会出现，这个图片没办法随着界面的分辨率而改变，如下代码：

.pic{ float:left; height:216px; width: 67%; overflow: hidden;}
.msg{ font: 12px/1.5 "微软雅黑", "宋体"; float:right; width:32.6%; height:215px; padding-top:14px; text-align:center; border:1px solid #d8e0f0; background:#eef4ff;}

items : [{
		xtype : 'panel',
		html : '<div class="m-main"><div class="top"><div class="pic"><img src="images/pic1.png" width="100%" height="100%" ></div><div class="msg" style="padding-top: 0px;">'
				+ '<iframe scrolling="no" src="roll.jsp" frameborder="0" width="100%" height="100%" ></iframe>'
				+ '</div></div></div>'

此处我们在CSS中将两个模块组合成为一行完整的信息，但是我们发现如果仅仅是这样的话，我们打两个模块在分辨率改变的时候，还是会使用当前的固定的宽度，而不会随着界面的变化而改变，为了解决这个问题，我们就可以在js上面使用div将两个模块包裹起来，然后在这个div中定义一个宽度和高度为100%，那么此时这个模块就会随着分辨率而改变了。