css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中
2011.02.22 于新城科技园。实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。具体代码如下：css3 图片等比缩放，居中显示.mysec{ width:400px; height:200px; border
·
2011.02.22 于新城科技园。
实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过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。
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)