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= ...
随机推荐
- eclipse插件安装 (zhuan)
https://my.oschina.net/gxs2012/blog/205875 http://blog.csdn.net/zhujiaxing666666/article/details/150 ...
- Mybatis调用Mysql存储过程
在我的后台系统中,今天需要使用到存储过程.存储过程还真没写过,今天就写了个存储过程.使用在后台中. 其实这个接口功能 是涉及几张表的修改,删除,新增的.就写个一个存储过程. 存储过程: ), ),) ...
- Java多线程同步的方法
一 synchronized关键字 1.synchronized实现原理: ---基于对象监视器(锁) java中所有对象都自动含有单一的锁,JVM负责跟踪对象被加锁的次数.如果一个对象被解锁,其计数 ...
- Java常见错误
1.NullPointerExceptin 空指针异常 a.引用没有初始化就使用 b.引用置空了,仍然被使用 2.IndexOutofBoundsException 下标越界 a.数组下标小于0 或者 ...
- xcode6 framework missing submodule xxx 警告
xcode6 framework missing submodule xxx 警告 从xcode6开始,iOS可以直接创建生成framework了 如: 创建 framework 项目,TFKit.f ...
- 常用SQL语句(交互)
%-------通配符 select * from [EMoney_Club].[dbo].[GoldIdea_AdviceCollect] where [Content] like '%昵称%' s ...
- linux笔记:linux常用命令-网络命令
网络命令:ping(测试网络连通性) 网络命令:ifconfig(查看和设置网卡信息) 注意:在查看网卡信息时,直接输入ifconfig命令即可. 网络命令:last(列出目前和过去登入系统的用户信息 ...
- js高级程序设计(三)基本概念
数据类型 ECMAscript中有五种简单数据类型Undefined,Null,Boolean,Number,String 还有一种复杂数据类型Object. typeof操作符 typeof可能返回 ...
- robotframework笔记26
测试数据文档工具(Testdoc) Testdoc是机器人框架内置的工具生成高水平 根据测试用例文档. 创建的文档是在HTML中 格式和它包括名称.文档和其他元数据 测试套件和测试用例,以及和他们的顶 ...
- 用excel处理重复数据
我们在处理数据时,重复数据常常会对分析造成很大麻烦,因此数据整理初期一个重要的工作是排重,excel2007以上版本中有一个删除重复项功常便捷,但是每次点来点去也很麻烦,下面我们用公式来对一些重复数据 ...