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 ...
随机推荐
- 算法习题---4-6莫尔斯电码(UVa508)
一:题目 A-Z0-9分别对应一些莫尔斯电码字符串 A .- B -... C -.-. D -.. E . F ..-. G --. H .... I .. J .--- K -.- L .-.. ...
- Python - Django - 删除作者
修改 author_list.html,添加删除按钮 <!DOCTYPE html> <html lang="en"> <head> <m ...
- (十三)static关键字
--摘自孤傲苍狼博客 一.static关键字
- Mysql coalesce()函数认识和用法
Mysql coalesce()函数认识和用法 coalesce()解释:返回参数中的第一个非空表达式(从左向右): 鉴于在mysql中没有nvl()函数, 我们用coalesce()来代替 ...
- iOS-MPMoviePlayerController视频播放
视频MPMoviePlayerController 在iOS中播放视频可以使用MediaPlayer.framework种的MPMoviePlayerController类来完成,它支持本地 视频和网 ...
- 添加tomcat8为服务
跟上一篇添加zookeeper为服务基本类似 脚本如下: #!/bin/bash CATALANA_HOME=/usr/local/tomcat8 export JAVA_HOME=/usr/loca ...
- 第一篇博客==>Hello_World
1,为什么写博客? 大佬都说程序员需要写博客的说,被无数到的大佬帮我洗脑之后,慢慢也发现了写博客的好处,写博客我认为主要有以下几个作用: 1.打开博客,记录世界记录你.emmm 2.可以把自己的一些经 ...
- Java实现回形数,只利用数组、循环和if-else语句
import java.util.Scanner; public class learn { public static void main(String[] args){ System.out.pr ...
- 【ARM-Linux开发】使用QT和Gstreanmer 遇到的一些问题
1.如果出现错误,可能是在安装UCT PCRF时,相关组件不全,略举两个碰到的错误. 1)curl/curl.h:No such file or directory --可能原因是libcurl及相关 ...
- Xmemcached集群与SpringBoot整合
创建SpringBoot项目xmemcached_springboot,添加开发需要的包名和类名,项目的目录结构如下: 添加XMemcached依赖: <dependency> <g ...