常用来做图片放大显示的遮罩层imgScale

HTML

  1. <div id="imgScale" >
  2. <img src="">
  3. </div>

CSS

  1. .imgScale{
  2. width: 670px;
  3. height: 320px;
  4. display: block;
  5. position: relative;
  6. }
  7. .imgScale img{
  8. max-width: 100%;
  9. max-height: 100%;
  10. width:auto;
  11. height:auto;
  12. position: absolute;
  13. left: 50%;
  14. top: 50%;
  15. transform: translate3d(-50%,-50%,0);
  16. -webkit-transform: translate3d(-50%,-50%,0);
  17. }

效果图

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. NPM 私服

    下载https://nodejs.org/en/download/ linux binaries x64版本xz -d ....xztar -xvf ....tar导入path修改~/.bashrc加 ...

  2. osgViewer::Viewer::Windows

    osg自带窗口去掉边框 #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #incl ...

  3. React调试——visual studio code

    原文链接:Using React in Visual Studio Code 原文链接:Live edit and debug your React apps directly from VS Cod ...

  4. 123457123456#0#-----com.yuming.baoBaoAiXueXi01hanzi--前拼后广--幼儿园宝宝学汉字

    123457123457#0#-----com.yuming.baoBaoAiXueXi01hanzi--前拼后广--幼儿园宝宝学汉字

  5. hadoop:/bin/bash: /bin/java: No such file or directory

    Stack trace: ExitCodeException exitCode=127 In HADOOP_HOME/libexec/hadoop-config.sh look for the if ...

  6. Jenkins占用内存较大解决办法

    主机启动jenkins后导致内存占用较大 登录主机top按键M按消耗内存排序 未调优前查看进程 修改配置文件 /usr/local/jenkins-tomcat/bin/catalina.sh 增加一 ...

  7. Maven下载依赖包所使用的方法或者说三方包

    wagon-http-3.2.0-shaded.jar 下载主要用的是这个包,mac位于路径/usr/local/Cellar/maven/3.6.0/libexec/lib下 如图,即使修改jar包 ...

  8. linux SSH 隧道

    一 什么是SSH隧道 首 先看下面这张图,我们所面临的大部分情况都和它类似.我们的电脑在右上角,通过公司带有防火墙功能的路由器接入互联网(当然可能还有交换机什么的在中间连 接着你和路由器,但是在我们的 ...

  9. php取上个月月初和月末时间戳

    $thismonth = date('m');$thisyear = date('Y');if ($thismonth == 1) { $lastmonth = 12; $lastyear = $th ...

  10. Vmware中安装的Ubuntu不能全屏问题解决

    现在有了开源的vmtoll可以下载:open-vm-tools   先安装open-vm-tools:sudo  apt-get install open-vm-tools   然后安装:(不知道具体 ...