CSS实现图片快速等比例缩放,效果佳
初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果。
这里提供一种纯CSS的图片缩放功能,请看代码:
<style type="text/css">
.auto-width {MARGIN: auto;WIDTH: 100px;}
.auto-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 100 ? "100px" : this.width)!important;}
</style> <div class="auto-width">
<img src="_img/test.png" />
</div>
CSS实现图片快速等比例缩放,效果佳的更多相关文章
- js实现图片的等比例缩放
js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...
- CSS 背景图片的定位和缩放
在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...
- android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框
本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...
- Qt图片按原比例缩放
1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...
- java读取jpg图片旋转按比例缩放
//入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...
- CSS图片Img等比例缩放且居中显示
常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...
- js 完成对图片的等比例缩放的方法
/* 重新按比例设置 页面上对应图片的长和高, */ function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { var wid ...
- CSS实现宽高成比例缩放
用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代 ...
- PHP对图片按照一定比例缩放并生成图片文件
list($width, $height)=getimagesize($filename);//缩放比例$per=round(400/$width,3); $n_w=$width*$per;$n_h= ...
随机推荐
- LINUX多线程(一)(创建和退出)
1. Linux多线程概述 1.1. 概述 进程是系统中程序执行和资源分配的基本单位.每个进程有自己的数据段.代码段和堆栈段.这就造成进程在进行切换等操作时都需要有比较负责的上下文切换等动作.为了进一 ...
- intel simd 资料
http://www.cnblogs.com/zyl910/archive/2012/04/26/md00.html https://software.intel.com/sites/landingp ...
- Python策略模式实现源码分享
1.让一个对象的某个方法可以随时改变,而不用更改对象的代码 2.对于动态类型的Python语言,不需要定义接口 3.基本的实现方法:用类作为参数传递 例如: 12_eg3.py class Movea ...
- Linux下数据库的安装和使用
数据库有多重要就不用说了,每一个计算机相关行业的人都必须要学会基本的数据库操作,因为你总会用到的. 之前转过一些学习资源: 与MySQL的零距离接触 - 慕课网 Python操作MySQL数据库 生物 ...
- Selenium Grid 运行报错 Exception thrown in Navigator.Start first time ->Error forwarding the new session Empty pool of VM for setup Capabilities
Selenium Grid 运行报错 : Exception thrown in Navigator.Start first time ->Error forwarding the new se ...
- mac 下基于firebreath 开发多浏览器支持的浏览器插件
mac 下基于firebreath 开发多浏览器支持的浏览器插件 首先要区分什么是浏览器扩展和浏览器插件;插件可以像本地程序一样做的更多 一. 关于 firebreath http://www.fir ...
- oneproxy---为实战而生之安装篇
OneProxy是一款数据库中间件,与目前市面上的TDDL.MySQL-Proxy属于同类型产品.我们坚持研发OneProxy是基于如下几点考虑: 1. 我们不想被某一种开发语言绑定 ...
- linux笔记:linux系统安装-系统分区
分区类型: 1.主分区:最多只能有4个. 2.扩展分区:最多只能有1个:主分区+扩展分区最多有4个:不能写入数据,只能包含逻辑分区. 3.逻辑分区. 格式化: 向磁盘中写入文件系统.会附带地清空磁盘中 ...
- 使用mybatis操作mysql数据库SUM方法返回NULL解决
使用SQL语句用函数SUM叠加的时候,默认查询没有值的情况下返回的是NULL,而实际可能我们要用的是返回0 解决: SELECT SUM(total) FROM test_table 改成: SE ...
- jmeter 远程测试
如果你的JMeter客户机不能进行属性,来模拟 足够的用户强调您的服务器或在网络水平是有限的,存在一个选项来控制多个远程JMeter 引擎从一个JMeter客户机. 通过运行JMeter远程,你可以复 ...