常用来做图片放大显示的遮罩层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. VC3DGraphicsWindowQt

    VC3DGraphicsWindowQt::VC3DGraphicsWindowQt(QWidget* parent, Qt::WindowFlags f) { osg::DisplaySetting ...

  2. HashSet的实现原理,简单易懂

    HashSet的实现原理,简单易懂   答: HashSet实际上是一个HashMap实例,都是一个存放链表的数组.它不保证存储元素的迭代顺序:此类允许使用null元素.HashSet中不允许有重复元 ...

  3. Linux -- Reactor

    结构 1. handles 资源的标志.这些资源通常包含网络连接,文件,定时器,同步对象等.handles 被用在注册服务器来标记socket,以便同步事件复用(Synchronous Event D ...

  4. 重新认识Java 8的HashMap

    [转自]美团技术博客 HashMap是Java程序员使用频率最高的用于映射(键值对)处理的数据类型.随着JDK(Java Developmet Kit)版本的更新,JDK1.8对HashMap底层的实 ...

  5. python基础之模块(一)

    概述 模块,用一砣代码实现了某个功能的代码集合.一个功能可能由 N 个函数来组成,这些函数写到一个py文件中,那么这个Py文件就是传说中的模块. 模块可将代码归类,让你的代码看着条理清晰,当然还需要你 ...

  6. CDS视图篇 2

    核心数据服务 (CDS) 公司希望使用 SAPS/4HANA 核心数据服务 (CDS) 视图技术.需要学习 CDS 视 图的概念和结构以及语法 . ● 核心数据服务是用于业务实体的 SAP 战略建模方 ...

  7. 【用户体验】Google关闭标签的体验

    https://www.uisdc.com/hunter/0221334485.html 在优设-细节猎人里有不少好案例.

  8. Java API操作Hadoop可能会遇到的问题以及解决办法

    https://www.zifangsky.cn/1292.html Could not locate Hadoop executable: xxx\bin\winutils.exe   1 2 3 ...

  9. iOS-UIImageView和UIImage

    UIImage self.imageView.contentMode = UIViewContentModeCenter;// 图片的内容模式 [self.imageView setFrame:CGR ...

  10. [转帖]拿小本本记下的Linux Shell常用技巧(一)

    拿小本本记下的Linux Shell常用技巧(一) https://zhuanlan.zhihu.com/p/73361101 一. 特殊文件: /dev/null和/dev/tty Linux系统提 ...