css3图片渐隐|css3实现图片在容器中等比例缩放及水平垂直居中

更新时间:2019-12-17    来源:css3教程    手机版     字体:

【www.bbyears.com--css3教程】

本文我们将介绍一种用纯css3实现图片在指定容器中等比例缩放及水平垂直居中显示的实例方法

先看实现代码




 css3 图片等比缩放,左右垂直居中显示 






实现效果如下:

css3实现图片比例缩放,左右垂直居中显示
如果改变一下容器的大小。比如:

将section的 width,height属性修改为

width:200px;
height:400px;

我们再来看效果:

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


CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水平垂直居中的方案。
采用了一种纯CSS3的实box方法实现水平垂直居中,现将实现的代码片段贴出与大家分享:

HTMLMarkup

 
 
 
    我就一行文字 
 
 
     
        我是多行文字
          我是多行文字       


CSSCode

.center{ 
width:300px; 
 height:200px; 
padding:10px; 
border:1px solid #ccc; 
 margin:20px auto; 
display:-webkit-box; 
-webkit-box-orient:horizontal; 
-webkit-box-pack:center; 
-webkit-box-align:center; 
display:-moz-box; 
-moz-box-orient:horizontal; 
-moz-box-pack:center; 
-moz-box-align:center; 
display:-o-box; 
-o-box-orient:horizontal; 
-o-box-pack:center; 
-o-box-align:center; 
display:-ms-box; 
-ms-box-orient:horizontal; 
-ms-box-pack:center; 
-ms-box-align:center; 
display:box; 
box-orient:horizontal; 
box-pack:center; 
box-align:center; 
} 
.centerimg, 
.text{ 
border:1px solid #dedede; 
padding:2px; 
}


实现水平垂直居中的关键代码:

display:-webkit-box; 
-webkit-box-orient:horizontal; 
-webkit-box-pack:center; 
-webkit-box-align:center; 
display:-moz-box; 
-moz-box-orient:horizontal; 
-moz-box-pack:center; 
-moz-box-align:center; 
display:-o-box; 
-o-box-orient:horizontal; 
-o-box-pack:center; 
-o-box-align:center; 
display:-ms-box; 
-ms-box-orient:horizontal; 
-ms-box-pack:center; 
-ms-box-align:center; 
display:box; 
box-orient:horizontal; 
box-pack:center; 
box-align:center;


由于flexbox是CSS3的一个新属性,目前支持的浏览器仅:IE10+,Firefox2+,Chrome4+,Safari3.1+。

本文来源:http://www.bbyears.com/css/82866.html