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

代码语言

代码分类

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

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

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

试试其它关键字

　图片比例　

同语言下

.前端PC-移动端CSS公共样式+HTML
.手机端页面通用样式
.H5页面通用头部设置
.elect默认样式美化代码兼容移动端和pc端
.按钮效果 css
.唤醒app
.放大效果
.html5+css3实现上拉和下拉刷新
.html上传图片后，在页面显示上传的图片
.html5实现点击弹出图片

可能有用的

.C#实现的html内容截取
.List 切割成几份工具类
.SQL查询多列合并成一行用逗号隔开
.一行一行读取txt的内容
.C#动态修改文件夹名称(FSO实现，不移动文件)
.c# 移动文件或文件夹
.c#图片添加水印
.Java PDF转换成图片并输出给前台展示
.网站后台修改图片尺寸代码
.处理大图片在缩略图时的展示

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

.手机端页面通用样式
.获取调用类的类名和方法名
.获取Web.Config中节点的值
.输入当前页码和每页显示数目，返回当前页第一条数目为
.读取文本文件并逐行输出该行使用最多的字符串及对应次
.把字段对应的数据按照相应的有效位显示
.获取IPV4
.实现上传图片本地预览功能以及限制图片的文件大小和尺
.实现图片比例缩放，左右垂直居中显示
.对给定的一个图片文件生成一个指定大小的缩略图，并将