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 ...
随机推荐
- 【边缘计算】 Edge Computing: Vision and Challenges
原文地址: http://www.cs.wayne.edu/~weisong/papers/shi16-edge-computing.pdf ----------------------------- ...
- 机器学习 - 算法 - Xgboost 数学原理推导
工作原理 基于集成算法的多个树累加, 可以理解为是弱分类器的提升模型 公式表达 基本公式 目标函数 目标函数这里加入了损失函数计算 这里的公式是用的均方误差方式来计算 最优函数解 要对所有的样本的损失 ...
- 建站之星v2.7快速更换模版
网站建设很多人使用建站之星因为它的拖拽功能非常友好.但是很多人不会使用建站之星更换模版,网上的教程又复杂难懂,现在教大家一个简单快捷的办法. 方法/步骤 废话不多说,从模版目录找到你喜欢的模版 ...
- ARM 之一 ELF文件、镜像(Image)文件、可执行文件、对象文件 详解
[转]https://blog.csdn.net/ZCShouCSDN/article/details/100048461 ELF 文件规范 ELF(Executable and Linking ...
- Greenwich.SR2版本的Spring Cloud Feign实例
前面我们了解了Spring Cloud Ribbon和Hystrix,在使用上它们基本上会成队出现,那么是不是可以把它们组合起来使用?而且我们发现,在服务消费方a-beautiful-client里通 ...
- 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_09-SpringSecurityOauth2研究-Oauth2密码模式授权
密码模式(Resource Owner Password Credentials)与授权码模式的区别是申请令牌不再使用授权码,而是直接 通过用户名和密码即可申请令牌. 测试如下: Post请求:htt ...
- ContextCleaner ——Spark 应用程序的垃圾回收器
ContextCleaner是一个Spark服务,负责在应用程序范围内清除 shuffles, RDDs, broadcasts, accumulators和checkpointed RDDs,目的是 ...
- CommMonitor8.0 串口过滤驱动 SDK DLL版本 C#/Delphi调用DEMO
CommMonitor8.0 SDK DLL 版本,此版本是直接调用DLL. Delphi调用定义: constCommMOnitor8x = ‘CommMOnitor8x.dll’; typeTOn ...
- 欧姆龙 EntherNet/IP(CIP报文格式)
Enthip/IP_ CIP报文格式 测试Demo在文章末尾 注册请求帧: 0x65 0x00 注册请求命令 2byte 0x04,0x00 header长度2byte < 封装头& ...
- java基本思想
面向对象 众所周知,面向对象编程思想是java的基本思想.java的整个体系和技术实现都是以这个思想为基础.(这个通过类和接口能看出来,后面提到) 对这个事情的认知度甚至变成了很多公司的面试标准.比如 ...