您的位置：首页 > Web前端 > CSS

img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

2015-10-08 15:38 555 查看

img及父元素(容器)实现类似css3中的background-size:contain / background-size:cover

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
.item{
width:600px;
height:500px;
float:left;
background-color:black;
}
body:after{
content:"";
display:block;
clear:both;
}
</style>
</head>
<body>
<div class="item"><img src="img/720x480.jpg" /></div>
<div class="item"><img src="img/snack.jpg" /></div>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function () {
/*
定义jQuery插件 imageSize
使用方式
$("容器").imageSize("contain") 或 $("容器").imageSize("cover")
*/
$.fn.imageSize = function (type) {
this.each(function () {
var This = $(this),
$img = This.find(">img"),
box_width = This.width(),
box_height = This.height();
getRealImageSize($img.attr("src"), function (w, h) {
if (type == "contain") {//跟background-size:contain一样效果
if (box_width / box_height <= w / h) {
$img.css({ width: "100%", height: "auto", paddingTop: ((box_height - box_width * h / w) / 2) + "px" });
}
else {
$img.css({ height: "100%", width: "auto", paddingLeft: ((box_width - box_height * w / h) / 2) + "px" });
}
} else if (type == "cover") {//跟background-size:cover一样效果
This.css("overflow", "hidden");
if (box_width / box_height <= w / h) {
$img.css({ width: "auto", height: "100%" });
}
else {
$img.css({ height: "auto", width: "100%" });
}
} else {//无效果
This.css("overflow", "hidden");
}
});
});
//引用自http://www.zhihu.com/question/28733200
function getRealImageSize(url, callback) {
var img = new Image();
img.src = url;

// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
callback(img.width, img.height);
} else {
// 完全加载完毕的事件
img.onload = function () {
callback(img.width, img.height);
}
}

}
};

/*
开始调用插件
*/
$(".item").imageSize("contain");
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航