html图片自适应裁剪,图片自适应裁剪(background-size:cover)

HTML


CSS

.img-container {

width: 100px;

height: 80px;

overflow: hidden;

float: left;

}

.img-container > img {

position: relative;

display: block;

max-width: none;

}

JS

//----UI object init

(function (window, $) {

//check Zepto

if (!$) {

throw 'please include zepto first.';

}

window.UI = {

boot: [],

$body: $('body'),

$doc: $(document),

$win: $(window),

$content: $('body').children('.app').length ? $('body').children('.app') : $('body'),

init: function () {

this.boot.forEach(function (fn) {

if ($.isFunction(fn)) {

fn();

}

});

}

};

//---组件

window.Component = function (fn) {

var UI = window.UI;

if (!UI) return;

fn(UI, $);

};

})(window, Zepto);

//-----图片自适应容器

window.Component(function (UI, $) {

UI.imageAdapt = function ($imgContainer) {

var $img = $imgContainer.children('img');

$img.on('load', function () {

var rate = $img.width() / $img.height();

var parentWidth = $imgContainer.width();

var parentHeight = $imgContainer.height();

var parentRate = parentWidth / parentHeight;

if ($img.length > 0 && rate > parentRate) {

//----horizental cut

$img.height(parentHeight);

$img.css("right", "50%");

$img.css("margin-right", "-" + $img.width() / 2 + "px");

} else {

//----vertical cut

$img.width(parentWidth);

$img.css("top", "50%");

$img.css("margin-top", "-" + $img.height() / 2 + "px");

}

});

}

UI.boot.push(function () {

$('.img-container').each(function () {

UI.imageAdapt($(this));

});

$(window).resize(function () {

$('.img-container').each(function () {

UI.imageAdapt($(this));

});

});

});

});

//----初始化

window.UI.init();