CSS图片Img等比例缩放且居中显示
常用来做图片放大显示的遮罩层imgScale
HTML
<div id="imgScale" >
<img src="">
</div>
CSS
.imgScale{
width: 670px;
height: 320px;
display: block;
position: relative;
}
.imgScale img{
max-width: 100%;
max-height: 100%;
width:auto;
height:auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
-webkit-transform: translate3d(-50%,-50%,0);
}
效果图

CSS图片Img等比例缩放且居中显示的更多相关文章
- 纯JS实现图片预览与等比例缩放和居中
最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...
- js实现图片的等比例缩放
js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...
- CSS实现图片快速等比例缩放,效果佳
初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...
- 图片 css剪切,等比例缩放
object-fit: cover; .img1 {//自定义图片宽高,并且等比例缩放 width: 200px; height: 400px; object-fit: cover; }
- css背景图等比例缩放,盒子随背景图等比例缩放
很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...
- NPOI 图片在单元格等比缩放且居中显示
NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 ...
- 《你不知道的 CSS》之等比例缩放的盒子
你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...
- android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框
本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...
- Qt图片按原比例缩放
1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...
随机推荐
- ansible软件部署
每一个软件或集群都创建一个单独的角色. mkdir -pv ansible/roles/{jdk,hadoop,spark}/{tasks,files,templates,meta,handlers, ...
- shell脚本安装python、pip--交互式的
首先把pip-.tgz 安装包放在 /usr/local 下面,按照顺序先安装pip,再安装python.不要先安装或只安装python,否则很容易出错, [root@bogon ~]# cat pi ...
- Linux清除痕迹
Linux清除痕迹 第一种方法: 在退出会话前直接执行: #history -r 清除当前会话的命令历史记录 第二种方法: 在vim中执行自己不想让别人看到的命令 随便用vim打开一个文件 :set ...
- linux中安装docker
uname -r yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ ...
- url请求特殊字符转换
一.问题阐述 用URL传参数的时候,用&符号连接,如果某一个参数中含"#$ ^ & * + ="这些符号的时候,在另一个页面getParameter就会取不到传过来 ...
- 【c# 学习笔记】使用新成员隐藏基类成员
如果想在派生类中定义与基类成员同名的成员,则可以使用new关键字把基类成员隐藏起来. 如果不适应new关键字,在派生类中定义一个与基类成员同名的成员,编译器将产生警告信息,如下代码演示: public ...
- 使用AndEngine重制《是男人就上一百层》
1.为什么还要做<是男人就上一百层> 一是在用Android原生API开发完<是男人就上一百层>以后,一直想体验一下用引擎开发游戏是个什么感觉,顺便也让游戏听上去高大上一些(使 ...
- DSP6455的EMIFA口
DSP6455的EMIFA口 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 支持两种不同的接口模式: 异步接口:标准的SRAM,ROM接口 同步接口:SBS ...
- 中检测到有潜在危险的 Request.Form 值
经常会出现从客户端(xxx)中检测到有潜在危险的 Request.Form 值. 这个问题我们只用在web.config中添加一句代码即可 <system.web> <pages v ...
- python线程互斥锁Lock(29)
在前一篇文章 python线程创建和传参 中我们介绍了关于python线程的一些简单函数使用和线程的参数传递,使用多线程可以同时执行多个任务,提高开发效率,但是在实际开发中往往我们会碰到线程同步问题, ...