初学者在实现图片等比例缩放,通常会使用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. Falcon Genome Assembly Tool Kit Manual

    Falcon Falcon: a set of tools for fast aligning long reads for consensus and assembly The Falcon too ...

  2. Python语言及其应用 - 知识点遍历

    遍历python语法     2.基本元素:数字.字符串和变量 2.1 python有哪些基本类型? 布尔型(True, False),整型(42,100000),浮点型(3.14159,1.0e8) ...

  3. 小韦系统装工行网银U盾驱动的方法

    小韦系统装工行网银U盾驱动的方法 拷贝文件.bat @echo 开始注册echo n|copy /-y scarddlg.dll %windir%\system32\echo n|copy /-y w ...

  4. Eclipse 编译错误 Access restriction: The type 'JPEGCodec' is not API (restriction on required library 'C:\Program Files\Java\jre7\lib\rt.jar')

    解决方案:          Project -> Properties ->Java Build Path -> libraries,         先 remove 掉 JRE ...

  5. X-UniTMX:导入大型Tiled地图文件(*.tmx)到Unity3d中比较好的插件

    因工作原因,需要导入格子数为1200x1200的Tiled地图文件(*.tmx)到Unity3d中显示出来.尝试过一些其它插件,后面发现X-UniTMX是比较好用的. X-UniTMXhttp://f ...

  6. [backbone]backbone.js

    学习文档: 开始学习 Backbone http://www.ibm.com/developerworks/cn/web/wa-backbonejs/

  7. IntelliSense: 应输入声明的解决方案

    出现问题的原因暂时没搞清楚,只是找到了解决方案,方案如下: 工具-->选项-->文本编辑器-->C/C++-->高级-->禁用自动更新-->True

  8. poj3669 Meteor Shower(BFS)

    题目链接:poj3669 Meteor Shower 我只想说这题WA了后去看讨论才发现的坑点,除了要注意原点外,流星范围题目给的是[0,300],到302的位置就绝对安全了... #include& ...

  9. 利用sklearn计算文本相似性

    利用sklearn计算文本相似性,并将文本之间的相似度矩阵保存到文件当中.这里提取文本TF-IDF特征值进行文本的相似性计算. #!/usr/bin/python # -*- coding: utf- ...

  10. 获取图片颜色的rgb,以供css设计背景颜色

    ColorPix