img允许图片溢出，但必须填充整个盒子，不允许变形

img允许图片溢出，但必须填充整个盒子，不允许变形

在这里插入图片描述
图片排版：
Css:固定图片外边盒子宽高度，超出隐藏，图片大过盒子宽高时，会自动截取一部分显示；
Js:获取图片原始宽高，找到宽与宽，高与高比例最大的那个比例值，图片width=原始width最大比例，高度自适应；
如果比例值相等，则直接片width=原始width比例；

HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。改造下获取图片尺寸的方法。

function getImgNaturalDimensions(img, callback) {
var nWidth, nHeight
if (img.naturalWidth) { // 现代浏览器
nWidth = img.naturalWidth
nHeight = img.naturalHeight
} else { // IE6/7/8
var imgae = new Image()
image.src = img.src
image.onload = function() {
callback(image.width, image.height)
}
}
return [nWidth, nHeight]
}
注意IE6/7/8的处理，创建了一个新的img，仅设置其src，这时需要让图片完全载入后才可以获取其宽高。因此这里是异步的，可以传一个回调，回调里把原始的宽高作为参数传入。