一,使用 JS,先上效果图,右图为定死宽高的效果,左图为处理之后的

1, 主要思路是,在图片 onload 后,将图片的宽高比和 div 容器的宽高比进行比较,

2, 从而确定拉伸或者压缩之后是宽还是高不足以填充容器

3,将不足以填充容器的方向设置为和容器一致

4,此时,图片的另一个方向可能超出容器,此时只要将图片做反方向的偏移,使其居中

5,容器定义超出部分不显示,以下是结合 Vue 的一个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片居中</title>
<link rel="stylesheet" href="../../common/css/common.css">
<script src="../../common/js/common.js"></script>
<script src="../../common/js/vue.min.js"></script>
<style type="text/css">
#main {
font-size: 0;
}
.box {
display: inline-block;
vertical-align: center;
width: 150px;
height: 150px;
overflow: hidden;
margin: 50px 0 0 20px;
}
</style>
</head>
<body>
<div id="main">
<div class="box" v-for="(item, i) in srcs">
<img :src="item" @load="resizeImg($event, 150, 150)">
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
data: {
srcs: [
"http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg",
"http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg",
"https://up.enterdesk.com/edpic_source/f5/34/83/f53483429ccc69d00ae98dd5f05317a4.jpg",
"http://img.taopic.com/uploads/allimg/131125/240503-1311250IT642.jpg"
]
},
methods: {
// 对图片大小调整,使其能够刚好充满容器, 多余方向裁剪使得图片不变形
resizeImg: function (ev, w, h) {
var img = ev.target;
console.log(img)
var scalebox = w / h, shifting = 0;
var scaleImg = img.width / img.height;
if (scalebox > scaleImg) {
img.width = w;
shifting = parseInt((img.height - h) / 2);
img.style.marginTop = 0 - shifting + 'px';
} else {
img.height = h;
shifting = parseInt((img.width - w) / 2);
img.style.marginLeft = 0 - shifting + 'px';
}
}
}
}).$mount("#main");
</script>
</body>
</html>

 二,使用 CSS 的 backgroud-image,backgroud-size,backgroud-postion 属性,这个比较简单,兼容性也比较好,推荐使用

注意,绑定数据的时候,使用 backgroud-image 不要使用 backgroud,否则会覆盖 backgroud-size,backgroud-postion 这两个属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片居中</title>
<link rel="stylesheet" href="../../common/css/common.css">
<script src="../../common/js/common.js"></script>
<script src="../../common/js/vue.min.js"></script>
<style type="text/css">
#main {
font-size: 0;
}
.box {
display: inline-block;
vertical-align: top;
margin: 50px 0 0 20px; width: 150px; /* 容器必须设置宽高 */
height: 150px;
background-size: cover;
background-position: center center;
}
</style>
</head>
<body>
<div id="main">
<div class="box" v-for="(item, i) in srcs" :style="{'background-image': 'url(' + item + ')'}"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
data: {
srcs: [
"http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg",
"http://img17.3lian.com/d/file/201703/07/4ceeb6fc3d7956ac7731290a603e0a84.jpg",
"https://up.enterdesk.com/edpic_source/f5/34/83/f53483429ccc69d00ae98dd5f05317a4.jpg",
"http://img.taopic.com/uploads/allimg/131125/240503-1311250IT642.jpg"
]
}
}).$mount("#main");
</script>
</body>
</html>

HTML5 图片宽高自适应,居中裁剪不失真的更多相关文章

  1. css+background实现 图片宽高自适应,拉伸裁剪不变形

    图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性.  下面咱们在网上找两张宽高不一样的照片:     No.1                                      ...

  2. jquery操作html中图片宽高自适应

    在网站制作中如果后台上传的图片不做宽高限制,在前台显示的时候,经常会出现图片变形,实用下面方法可以让图片根据宽高自适应,不论是长图片或者高图片都可以完美显示. $("#myTab0_Cont ...

  3. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  4. 从零开始学习前端开发 — 7、CSS宽高自适应

    一.宽度自适应 语法:width:100%; 注: a)块状元素的默认宽度为100% b) 当给元素设置宽度为100%时,继承父元素的宽度 c) 通常使用宽度自适应实现通栏效果 二.高度自适应 语法: ...

  5. php 图片上传的公共方法(按图片宽高缩放或原图)

    写的用于图片上传的公共方法类调用方法: $upload_name='pic';$type = 'logo_val';$file_name = 'logo_' . $user_id .create_st ...

  6. css3圆形头像(当图片宽高不相等时)

    1.图片宽高相等,width:300px: height:300px; 把他变成宽高100px的圆形头像 img{width:100px; height:100px; border-radius:50 ...

  7. JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

  8. 007. 自定义ListBox的item的宽高, 字体居中

    /// <summary> /// 自定义ListBox的item的宽高, 字体居中 /// </summary> /// <param name="sende ...

  9. 转载:JS快速获取图片宽高的方法

    快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...

随机推荐

  1. tomcat源码 StandardServer

    在执行org.apache.catalina.startup.Catalina#load的时候会执行org.apache.catalina.core.StandardServer#init,然后会调到 ...

  2. 阿里云kubernetes遭入侵pubg进程占用cpu资源100%解决方法

    发现服务器CPU占用100%,通过top命令发现pubg -c config.json -t 2占用CPU资源,kill进程会自动启动.黑客入侵方式是kubernetes创建pod. Name: ku ...

  3. 峰Redis学习(7)Redis 之Keys 通用操作

    keys * 显示所有key   查找所有以s开头的key 用s*  *代表任意字符 127.0.0.1:6379> keys s* 1) "set3" 2) "s ...

  4. API网关之Kong网关简介

    1. Kong简介 那么,Kong是一个什么东东呢?它是一个开源的API网关,或者你可以认为它是一个针对API的一个管理工具.你可以在那些上游service之上,额外去实现一些功能.Kong是开源的, ...

  5. golang中defer的理解

    在golang当中,defer代码块会在函数调用链表中增加一个函数调用.这个函数调用不是普通的函数调用,而是会在函数正常返回,也就是return之后添加一个函数调用.因此,defer通常用来释放函数内 ...

  6. 构建Redis主从镜像

    构建Redis的基础镜像,然后基于这个基础镜像构建主Redis镜像和从Redis镜像. 1.构建Redis基础镜像 创建redis基础镜像目录 [root@localhost mnt]# mkdir ...

  7. python的68个内置函数

    内置函数 内置函数就是python给你提供的, 拿来直接用的函数, 比如print., input等. 截止到python版本3.6.2 python一共提供了68个内置函数. #68个内置函数 # ...

  8. AndroidStudio快捷键使用记录

    输入logt+回车 自动增加Tag的定义. private static final String TAG = "MainActivity"; 输入logd+回车 自动增加d级别的 ...

  9. 06-001 DependencyInjection 之 LifecycleKind

    IApplicationBuilder 里有如下一成员: IServiceProvider ApplicationServices { get; set; } HttpContext 里有如下两个成员 ...

  10. Servlet基础学习

    Servlet学习 Servlet是Server与Applet的缩写,是服务端小程序的意思.使用Java语言编写的服务器端程序,可以像生成动态的WEB页,Servlet主要运行在服务器端,并由服务器调 ...