css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中

最新推荐文章于 2022-10-08 15:10:20 发布

sangfei_no1

最新推荐文章于 2022-10-08 15:10:20 发布

阅读量3.7k

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

2011.02.22 于新城科技园。

实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。

随着css3的普及，现在介绍一种单纯通过css来进行控制。

具体代码如下：

[html]view plaincopy 
   
 <!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。

sangfei_no1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中

2011.02.22 于新城科技园。实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。具体代码如下：[html] view plaincopy> head> meta charset
复制链接

扫一扫