初学者在实现图片等比例缩放,通常会使用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实现图片快速等比例缩放,效果佳的更多相关文章

  1. js实现图片的等比例缩放

      js实现图片的等比例缩放 CreateTime--2018年3月6日14:04:18 Author:Marydon 1.代码展示 /** * 图片按宽高比例进行自动缩放 * @param ImgO ...

  2. CSS 背景图片的定位和缩放

    在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如: .example { background-image: url(image/some.png); ba ...

  3. android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  4. Qt图片按原比例缩放

    1.选择图片 QString strFilePath = QFileDialog::getOpenFileName(this, tr("Select file"), QStanda ...

  5. java读取jpg图片旋转按比例缩放

    //入口 public static BufferedImage constructHeatWheelView(int pageWidth, int pageHeight, DoubleHolder ...

  6. CSS图片Img等比例缩放且居中显示

    常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...

  7. js 完成对图片的等比例缩放的方法

    /* 重新按比例设置 页面上对应图片的长和高, */ function resetImgSize(id,imgWidth,imgHeight,posWidth,posHeight) { var wid ...

  8. CSS实现宽高成比例缩放

    用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢.         html代 ...

  9. PHP对图片按照一定比例缩放并生成图片文件

    list($width, $height)=getimagesize($filename);//缩放比例$per=round(400/$width,3); $n_w=$width*$per;$n_h= ...

随机推荐

  1. eclipse插件安装 (zhuan)

    https://my.oschina.net/gxs2012/blog/205875 http://blog.csdn.net/zhujiaxing666666/article/details/150 ...

  2. Mybatis调用Mysql存储过程

    在我的后台系统中,今天需要使用到存储过程.存储过程还真没写过,今天就写了个存储过程.使用在后台中. 其实这个接口功能  是涉及几张表的修改,删除,新增的.就写个一个存储过程. 存储过程: ), ),) ...

  3. Java多线程同步的方法

    一 synchronized关键字 1.synchronized实现原理: ---基于对象监视器(锁) java中所有对象都自动含有单一的锁,JVM负责跟踪对象被加锁的次数.如果一个对象被解锁,其计数 ...

  4. Java常见错误

    1.NullPointerExceptin 空指针异常 a.引用没有初始化就使用 b.引用置空了,仍然被使用 2.IndexOutofBoundsException 下标越界 a.数组下标小于0 或者 ...

  5. xcode6 framework missing submodule xxx 警告

    xcode6 framework missing submodule xxx 警告 从xcode6开始,iOS可以直接创建生成framework了 如: 创建 framework 项目,TFKit.f ...

  6. 常用SQL语句(交互)

    %-------通配符 select * from [EMoney_Club].[dbo].[GoldIdea_AdviceCollect] where [Content] like '%昵称%' s ...

  7. linux笔记:linux常用命令-网络命令

    网络命令:ping(测试网络连通性) 网络命令:ifconfig(查看和设置网卡信息) 注意:在查看网卡信息时,直接输入ifconfig命令即可. 网络命令:last(列出目前和过去登入系统的用户信息 ...

  8. js高级程序设计(三)基本概念

    数据类型 ECMAscript中有五种简单数据类型Undefined,Null,Boolean,Number,String 还有一种复杂数据类型Object. typeof操作符 typeof可能返回 ...

  9. robotframework笔记26

    测试数据文档工具(Testdoc) Testdoc是机器人框架内置的工具生成高水平 根据测试用例文档. 创建的文档是在HTML中 格式和它包括名称.文档和其他元数据 测试套件和测试用例,以及和他们的顶 ...

  10. 用excel处理重复数据

    我们在处理数据时,重复数据常常会对分析造成很大麻烦,因此数据整理初期一个重要的工作是排重,excel2007以上版本中有一个删除重复项功常便捷,但是每次点来点去也很麻烦,下面我们用公式来对一些重复数据 ...