实现图片比例缩放，左右垂直居中显示代码,Css代码库,德仔网

代码语言

代码分类

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

作者:世民 / 发布于2016/6/7/ 607

<!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>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图片比例　

同语言下

可能有用的

世民贡献的其它代码(12)