初学者在实现图片等比例缩放,通常会使用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. about opencl

    Platform:LG G3,Adreno 330 1. 8M(3264x2448) memmap方式读入时间24ms,读出时间12ms,时间与内存大小基本成线性关系.使用memmap 与 memco ...

  2. SpringMVC简单构造restful, 并返回json

    https://my.oschina.net/u/2272916/blog/352297

  3. --tags --follow-tags 的区别

    --tags    All refs under refs/tags are pushed, in addition to refspecs explicitly listed on the comm ...

  4. Open-falon监控安装过程

    Open-falon监控安装过程   具体参考:   http://book.open-falcon.org/zh/quick_install/prepare.html 1. 安装ntp.vim编辑器 ...

  5. 解决 placeholder 垂直不居中,偏上的问题

    解决 placeholder 垂直不居中,偏上的问题 安卓浏览器显示placeholder 垂直不居中,而iphone没问题,搜了一下答案,解决方法是把input的line-height去掉就行 参考 ...

  6. kmeans算法原理以及实践操作(多种k值确定以及如何选取初始点方法)

    kmeans一般在数据分析前期使用,选取适当的k,将数据聚类后,然后研究不同聚类下数据的特点. 算法原理: (1) 随机选取k个中心点: (2) 在第j次迭代中,对于每个样本点,选取最近的中心点,归为 ...

  7. grouping sets,cube,rollup,grouping__id,group by

    例1: hive -e" select type ,status ,count(1) from usr_info where pt='2015-09-14' group by type,st ...

  8. C# winform程序怎么打包成安装项目(图解)

    1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点击确定.(详细见下图) 此主题相关图片如下: 2:安装向导 关闭后打开安 ...

  9. mysql的小知识点(关于数据库的导入导出 对于windows)

    对于,一个存在的数据,我们该如何去打包成.sql属性的文件呢? 直接进行这两条语句: D:\Program Files\MySQL\mysql\bin>mysqldump -u root -p ...

  10. hdu 3635 Dragon Balls (带权并查集)

    Dragon Balls Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...