css3实现图片比例缩放，左右垂直居中显示

作者：编程知识库发布：2015-04-30 分类：Css3 Html5 阅读：3,326次

实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。
随着css3的普及，现在介绍一种单纯通过css来进行控制。

<!html>
<head>
<meta charset="utf-8">
<title> css3 图片等比缩放，居中显示 </title>
<style>
.mysec{
&nbsp;&nbsp;&nbsp; width:400px;
&nbsp;&nbsp;&nbsp; height:200px;
&nbsp;&nbsp;&nbsp; border:solid 1px #ccc;
&nbsp;&nbsp;&nbsp; background-color:red;
&nbsp;&nbsp;&nbsp; background-image:url(image/DSCI0002.JPG); /*图片地址*/
&nbsp;&nbsp;&nbsp; background-origin:content;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*从content区域开始显示背景*/
&nbsp;&nbsp;&nbsp; background-position:50% 50%;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*图片上下左右居中*/
&nbsp;&nbsp;&nbsp; background-size:contain;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
&nbsp;&nbsp;&nbsp; background-repeat:no-repeat;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; /*图像不重复显示*/
}
</style>
</head>
<body>
<section class="mysec"></section>
</body>
</html>

如果有不明白的地方，可以自行在google上面搜索一把，信息一搜一把。

效果如下：

如果改变一下容器的大小。比如：

将section的 width，height属性修改为

width:200px;
height:400px;

我们再来看效果：

是不是稍微有那么一点点儿神奇呢？？ hoho。

转载请注明：css3实现图片比例缩放，左右垂直居中显示 - 编程知识库

该文章由编程知识库发于2015年04月30日发表在Css3 Html5分类下，你可以至底部留下评论。

原创文章转载请注明: css3实现图片比例缩放，左右垂直居中显示 | 编程知识库

上一篇：网站静态、伪静态、缓存的区别

下一篇：linode通过Lish修改ssh端口

您可能还会对这些文章感兴趣

雷军22年前写的程序代码保准你没见过！

作为小米科技的创始人、董事长和首席执行官，雷军的名字如雷贯耳。上午W3Cschool发布了一篇“刘强东的代码水平如何”(有兴趣的可以点击右上角关注我们)的文章，有网友在下面回复“代码只服雷军”。这个回复吸引了W3Cschool的注...
只会用jQuery前端到底low不low?

如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下，因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么，我是考了成考的北京航空航天大学，也马上快...
UED原型设计工具Axure汉化版

Axure汉化版已经发布，版本号Axure 5.1.0.1699，下面是截图效果 Axure汉化版文件下载地址：Axure汉化补丁 Axure RP pro 5.1.0.1699 下载地址注册用户名：Axure 序列...
百度公共DNS无劫持IP 从此上网无阻

今天百度推出公共DNS服务，IP地址为180.76.76.76，号称拥有遍布全国的递归出口节点，可以做到更稳定，纯净无劫持等。 DNS在现有整个互联网基础架构中也扮演着流量”调度员”、”指引员”的角色。尽管已经有超过30年历史,DNS仍...
小伙打造网站媒体帝国月访问量4500万

　　BI中文站 6月7日报道艾默生·斯帕茨(Emerson Spartz)今年28岁，已婚，是Spartz Inc公司的首席执行官。Spartz Inc是一个网站媒体帝国，旗下的30多家网站专门发布有趣、励志和让人感到不可思议的文章和帖子，其分享量非常...