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= ...
随机推荐
- Android控件之MultiAutoCompleteTextView(自动匹配输入的内容)
一.功能 可支持选择多个值(在多次输入的情况下),分别用分隔符分开,并且在每个值选中的时候再次输入值时会自动去匹配,可用在发送短信,发邮件时选择联系人这种类型中 二.独特属性 android:comp ...
- nfs服务器设置
前段时间重新装了一下Linux系统,结果导致NFS服务器总是挂在不成功,于是粗略学习了一下: NFS服务需要两个软件包: 1.nfs-utiles-* 2.portmap-* nfsd:它是基本的NF ...
- xcode6 AsynchronousTesting 异步任务测试
xcode集成了非常方便的测试框架,XCTest 在xcode6之后,提供了 <XCTest/XCTestCase+AsynchronousTesting.h> 利用此我们可以直接在XCT ...
- 【转】 FPGA设计的四种常用思想与技巧
本文讨论的四种常用FPGA/CPLD设计思想与技巧:乒乓操作.串并转换.流水线操作.数据接口同步化,都是FPGA/CPLD逻辑设计的内在规律的体现,合理地采用这些设计思想能在FPGA/CPLD设计工作 ...
- ie8 table td拆分宽度不适应问题
在table上加style="table-layout: fixed;"并在首行加一个高度为0且给定宽度的tr <table class="subtabledeta ...
- (16)odoo8 API 指南
http://odoo-new-api-guide-line.readthedocs.org/en/latest/index.html
- java多线程下如何调用一个共同的内存单元(调用同一个对象)
/* * 关于线程下共享相同的内存单元(包括代码与数据) * ,并利用这些共享单元来实现数据交换,实时通信与必要的同步操作. * 对于Thread(Runnable target)构造方法创建的线程, ...
- 初学Java之Pattern与Matcher类
import java.util.regex.*; public class Gxjun{ public static void main(String args[]) { Pattern p; // ...
- swiftlint升级
~/Opal/iOS/App (mike/lyrics) $ which brew/usr/local/bin/brew~/Opal/iOS/App (mike/lyrics) $ cd /usr/l ...
- DB、ETL、DW、OLAP、DM、BI关系结构图
DB.ETL.DW.OLAP.DM.BI关系结构图 在此大概用口水话简单叙述一下他们几个概念: (1)DB/Database/数据库——这里一般指的就是OLTP数据库,在线事物数据库,用来支持生产的, ...