常用来做图片放大显示的遮罩层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等比例缩放且居中显示的更多相关文章

  1. 纯JS实现图片预览与等比例缩放和居中

    最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTM ...

  2. js实现图片的等比例缩放

      js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...

  3. CSS实现图片快速等比例缩放,效果佳

    初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果. 这里提供一种纯CSS的图片缩放功能,请看代码: <style type="text/css&quo ...

  4. 图片 css剪切,等比例缩放

    object-fit: cover; .img1 {//自定义图片宽高,并且等比例缩放 width: 200px; height: 400px; object-fit: cover; }

  5. css背景图等比例缩放,盒子随背景图等比例缩放

    很多时候我们给网站了一个大banner,但是随着屏幕的变化,背景会变形,我们知道background-size可以实现背景图等比例缩放,但是,我们想让下面的盒子根据缩放后背景图的高度,也能自动向上挤. ...

  6. NPOI 图片在单元格等比缩放且居中显示

    NPOI导出的图片默认是在单元格左上方,这使得图片在单元格显示得很难看.居中,且等比缩放,才是图片在单元格上的完美展示. /// <summary> /// 图片在单元格等比缩放居中显示 ...

  7. 《你不知道的 CSS》之等比例缩放的盒子

    你肯定已经知道,对于一个 img 元素而言,你可以单独地修改它的 width 或者 height 属性来设置它的大小,同时图片的比例还能够保持不变. 如下图所示,最上面是原始大小的图片,下面两张则分别 ...

  8. android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  9. Qt图片按原比例缩放

    1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...

随机推荐

  1. springboot之freemarker 和thymeleaf模板web开发

    Spring Boot 推荐使用Thymeleaf.FreeMarker.Velocity.Groovy.Mustache等模板引擎.不建议使用JSP. 一.Spring Boot 中使用Thymel ...

  2. ISO/IEC 9899:2011 条款5——5.2.3 信号与中断

    5.2.3 信号与中断 1.函数应该被设计为它们可以被一个信号在任一时刻打断,或是被一个信号处理所调用,或是两者都发生,对于初期不发生改变,但仍然处于活动状态,调用的控制流(在中断之后),函数返回值, ...

  3. python中dir,__dict__ , __setitem__(),__getitem__()

    class Testa: pass class Testb(object): pass if __name__ == '__main__': print 'testb = ',dir(Testb) p ...

  4. 123457123457#0#-----com.threeapp.renzhepaoku01----儿童跑酷游戏(忍者版)

    com.threeapp.renzhepaoku01----儿童跑酷游戏(忍者版)

  5. WebGL学习之HDR与Bloom

    原文地址:WebGL学习之HDR与Bloom 什么是HDR HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段.简单讲就是将 ...

  6. Direct2D 学习笔记(1)概述

    Direct2D 应用程序接口概述 资源网站 https://docs.microsoft.com/en-us/windows/win32/Direct2D/the-direct2d-api 主要用到 ...

  7. vue 强制组件重新渲染

    参考链接:https://blog.csdn.net/zyx1303031629/article/details/86656785

  8. ELK优化难题解决

    你头疼的ELK难题,本文几乎都解决了 一.ELK实用知识点总结 1.编码转换问题 这个问题,主要就是中文乱码. input中的codec=>plain转码: codec => plain ...

  9. Kali中安装VMwaretools

    VMware Workstation 中 虚拟机选项,安装VMware Tools 选项. 在虚拟机中,打开VMware Tools,将 VMwareTools-10.1.15-6627299.tar ...

  10. Beginning Linux Programming 学习-chapter2-Shell programming-Pipes and Redirection

    "为了从事创造性工作,人类需要孤独,可是在孤独中,广义的人类仍存在于内心."--(德国)奥铿                                             ...