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= ...
随机推荐
- Asp.NET设置Session过期时间的四种方式
在Asp.net中,可以有四处设置Session的过期时间: 一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会话超时(分钟)-设置为120,即为2小时,即120分 ...
- iphone SE 自带视频播放器要求的视频格式转换参数
- iOS开发 字符串添加行间距
+ (CGFloat)achiveWidthAttrString:(NSAttributedString *)attrString withHeight:(CGFloat)height { CGRec ...
- Python开发者须知 —— Bottle框架常见的几个坑
Bottle是一个小巧实用的python框架,整个框架只有一个几十K的文件,但却包含了路径映射.模板.简单的数据库访问等web框架组件,而且语法简单,部署方便,很受python开发者的青睐.Pytho ...
- ObjectMapper处理从远程获取的Object对象
微服务中从其他服务获取过来的对象,如果从Object强转为自定义的类型会报错,利用ObjectMapper转换. ObjectMapper mapper = new ObjectMapper(); D ...
- BOM头的来源
类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...
- 设置segue跳转页面
第二种是利用ViewController与ViewController之间,拖拽添加segue 方法中提到的设置segue的identifier界面 在.h文件中声明 - (IBAction)goto ...
- Computer assembly and maintenance
转载请注明出处: 我所遇见的世界会更美好 第一章 计算机的基本构成和组装 1,内存的组成? (1) RAM(随机存取存储器) (2) ROM(只读存储器) (3) Cache(高速缓存) 2,S ...
- poj-----(2528)Mayor's posters(线段树区间更新及区间统计+离散化)
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 43507 Accepted: 12693 ...
- uva----(10794) A Different Task
A Different Task The (Three peg) Tower of Hanoi problem is a popular one in computer science. Bri ...