本文我们将介绍一种用纯css3实现图片在指定容器中等比例缩放及水平垂直居中显示的实例方法
先看实现代码
<!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>
实现效果如下：
如果改变一下容器的大小。比如：
将section的 width，height属性修改为
width:200px;
height:400px;
我们再来看效果：
CSS3实现水平垂直居中
水平垂直居中的制作大家都有碰到过，水平居中方法好处理，但是垂直居中的话还是让很多人头痛过，我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片，单行文本和多行文本实现各种浏览器的水平垂直居中的方案。
采用了一种纯CSS3的实box方法实现水平垂直居中，现将实现的代码片段贴出与大家分享：
HTMLMarkup
<divclass="center"> <imgsrc="http://www.w3cplus.com/sites/default/files/source/webdesign.jpg"alt=""/> </div> <divclass="center"> <divclass="text">我就一行文字</div> </div> <divclass="center"> <divclass="text"> 我是多行文字<br/> 我是多行文字 </div> </div>
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+。
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css3
， 代码
属性
css3 垂直居中、css3文字垂直居中、css3 居中、css3 垂直水平居中、css3图片垂直居中，以便于您获取更多的相关知识。
时间： 2024-10-07 11:12:21