css3实现图片比例缩放，左右垂直居中显示
实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。
随着css3的普及，现在介绍一种单纯通过css来进行控制。
<!html>
<head>
<meta charset="utf-8">
<title> css3 图片等比缩放，居中显示 </title>
<style>
.mysec{
width:400px;
height:200px;
border:solid 1px #ccc;
background-color:red;
background-image:url(image/DSCI0002.JPG); /*图片地址*/
background-origin:content; /*从content区域开始显示背景*/
background-position:50% 50%; /*图片上下左右居中*/
background-size:contain; /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
background-repeat:no-repeat; /*图像不重复显示*/
}
</style>
</head>
<body>
<section class="mysec"></section>
</body>
</html>
如果有不明白的地方，可以自行在google上面搜索一把，信息一搜一把。
效果如下：
如果改变一下容器的大小。比如：
将section的 width，height属性修改为
width:200px;
height:400px;
我们再来看效果：
是不是稍微有那么一点点儿神奇呢？？ hoho。
转载请注明：css3实现图片比例缩放，左右垂直居中显示 - 前端开发
上一篇：网站静态、伪静态、缓存的区别
为您推荐
您可能还会对这些文章感兴趣
2016-12-16前端开发HTML5本地存储总结
前端开发中，我们经常接触到浏览器，谈到浏览器，自然会想到有些页面之间是怎么共享数据的，怎么保存数据的，今天就来解决这个用户痛点。SessionStorage, LocalStorage, Cookie这...
2016-12-15HTML5画出五星红旗
源码： <!DOCTYPE html> <html> <head> <meta charset=”gbk”> <title>中国标准国旗</title> </head> <body> <c...
2014-11-28css3几何图形、多边图形shape研究
前言 估计大家在日常工作中都会用到css形状，但是目前天朝中使用到最多的估计就是圆（circle）、椭圆（ellipse）、各种三角形形状，但是你肯定很少看见过用几何图形或者多边图形。...
2014-11-26css3实现渐变的iPhone滑动解锁效果
该效果的主要实现思路是给文字添加渐变的背景，然后对背景进行裁剪，按文字裁剪（目前只有webkit内核浏览器支持该属性），最后给背景添加动画，即改变背景的位置，背景动画效果如...
2014-11-25css3文字高亮发光特效
HTML代码 <span class="shiny"><span class="inner-shiny">Shiny</span> </span> CSS代码 body { background: #111; } .s...
2014-11-20IE浏览器让ie支持CSS3的方法
再也不用为迁就低版本IE而额外写代码了，直接按照现代浏览器标准写，最后加入selectivizr即可。一个字，爽！ 大神们常说：PC端写css3，优雅降级才是王道。但是鉴于草根前端er们在...
2014-11-17纯css3 loading动画加载效果
在线演示源码下载 html代码 <div class="inner"> <div class="load-container load1"> <div class="loader">Loadi...
2014-11-17css3制作火影忍着写轮眼开眼及进化过程
今天是火影忍者（漫画）宣告完结的日子，也是我首发的第一个随笔。看过火影的朋友都知道，写轮眼是什么，这里就不多说了。下面就直接展示整个效果，上张图，先睹为快： 目前已经...
2014-11-14手机浏览器全屏代码,css3+html5+js控制手机浏览器全屏
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新的JavaScript API,简单而又强大. FullScreen 让我们可以通过编程的方式来向用户请求全屏显示,...
2014-04-28css仿ios7背景图片模糊效果,css3毛玻璃模糊效果
前段时间，iOS7不是瓜未熟就落地了嘛，然后捡瓜的人很多，然后国内外开始了各种探讨，从界面到动画，从兼容到实现等。其中，“毛玻璃”一次梆梆出世，一些爱折腾的弄潮人就可以琢磨...
猜你喜欢
大家正在看
- 豆瓣网前端开发规范之-css开发规范
- JS实现HTML静态页传值的方法
- App Store免费App排名的标准
- js cookies控制网站节日背景显示隐藏
- AndroidStudio导入SlidingMenu侧滑框架
- Axialis IconWorkshop高清ico图标制作软件
- 20个改变网站用户体验的方法
- APP常见的盈利模式
- jQuery Google Charts封装google chart api的jquery插件
- 异步顺序加载 JavaScript 脚本队列
- JPG图片优化压缩
- 百度网盘的极速妙传原理是什么？原来是对比MD5特征值
- jquery点击div之外的地方div本身消失
- jquery判断checkbox是否选中及改变checkbox状态