最近完成了一个关于图片自适应显示的需求,就是比屏幕小的显示原尺寸,比屏幕大的图片不超出屏幕显示。
刚看到这条需求,第一反应,js来控制。
于是便写下这么一段(以宽度为例):
var img = $(.img);
img.load(function(){
var imgW = img.width();
var screenW = $(window).width();
if(imgW<screenW){
img.css( 'width': 'auto');
}else{
img.css('width', '100%');
}
})
但是,我们有更简单的方法:
.img{
width: auto;
max-width: 100%;
}