初学者在实现图片等比例缩放,通常会使用js编写逻辑来控制高或宽,达到自动缩放的效果。

这里提供一种纯CSS的图片缩放功能,请看代码:

  1. <style type="text/css">
  2. .auto-width {MARGIN: auto;WIDTH: 100px;}
  3. .auto-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 100 ? "100px" : this.width)!important;}
  4. </style>
  5.  
  6. <div class="auto-width">
  7. <img src="_img/test.png" />
  8. </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. IE和Firefox的Javascript兼容性总结

    长久以来JavaScript兼容性一直是Web开发者的一个主要问题.在正式规范.事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬.为此,主要从以下几方面差异总结IE和Firefox的Javas ...

  2. hiho1091_clicker背包问题

    问题 类似有限背包问题,题目链接:clicker 实现 #include<stdio.h> #include<cmath> #include<iostream> # ...

  3. html中盒子模型立体结构图

    边框(border),位于盒子的第一层..元素内容(content).内边距(padding),两者同位于第二层..背景图(background-image),位于第三层..背景色(backgroun ...

  4. commonJS — 字符串操作(for String)

    for String github: https://github.com/laixiangran/commonJS/blob/master/src/forString.js 代码 /** * Cre ...

  5. phalcon(费尔康)框架学习笔记

    phalcon(费尔康)框架学习笔记 http://www.qixing318.com/article/phalcon-framework-to-study-notes.html 目录结构   pha ...

  6. vm 安装 vcenter 本主要记录选择l现有的受支持数据库

    1.将先决条件安装完毕. 安装 .NET3.5 全部下一步记录设置的密码.备忘.

  7. wps的几个优点

    wps的几个优点 1.wps非常小巧,wps2011源文件38M,安装后160M,wps2010安装过后158M,工具栏.程序设置.模板可保存在一个文件里面,重装后用\WPS Office Perso ...

  8. js更改input标签的读写属性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. bzoj题解汇总(1001-1016)

    bzoj1001: 平面图网络流. 注意只有一行或者一列的情况. bzoj1002: 待定系数法求解递归式.或者用MatrixTree+行列式直接推导. 然后来个高精度. bzoj1003: dp+最 ...

  10. Python 练习 12

    #!/usr/bin/python # -*- coding: UTF-8 -*- year = int(raw_input('year:\n')) month = int(raw_input('mo ...