css中怎么改变图片尺寸,CSS也可以改变图片幅面尺寸

一般情况下，只有标签中的图片，可以根据宽高设定来改变大小。

比如1024x768的图，我们设width="640",height="480"，他就会显示640x480。

往往为了避免不必要的数据传输，反而不提倡读取非实际大小的图片。

但我也没有想到，这世界上有些情况，恰恰需要用一个固定尺寸去读取实际上大很多很多的图片。

为的是，增加屏幕显示的DPI。

做Smart phone网站时，不用说Retina，一般高画质的屏幕都需要读取高清晰度的图片，否则就朦朦胧胧。

与彩色照片不同，一些颜色单一但是字体特殊的按钮，标题等，反而对图片质量要求很高。

在PS中如果拥有矢量编辑能力，将这些图片放大，做成高分辨率的图片，再让他自适应移动设备的屏幕尺寸，是获取高密度像素显示效果的不二法门。

我试过用PS的图像大小来提高DPI，但不论怎么提高，做成小尺寸图片后，仍然达不到效果，难道那个DPI形同虚设？

有些按钮可以用的方法制作，会很方便的自适应。

但要怎么办呢？

只有用CSS做背景。

如果CSS不能压缩一个幅面较大的图片到固定尺寸，只抠取局部显示，那这个问题就解决不了。

庆幸的是CSS3已经具备了这样的能力：

background:url(../images/uploadbtn.png) center no-repeat #ff1300; background-size:296px 55px;

background-size:可以轻松把500x93乃至更大的图片，缩小至296x55。

这样不论是还是这样的标签，用大图来显示高像素密度的小图都成为可能。

利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色

体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...

用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题

在一个main.js中require一个scss文件,scss文件中用了背景图片,图片url是用的相对路径,用extract-text-webpack-plugin插件提取出的css文件背景图片路径不 ...

CSS Image Sprite--网页图片应用处理方式

CSS Sprites简介 CSSSprites在国内很多人叫css精 灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片 ...

通过html5的range属性动态改变图片的大小

range属性已经是很成熟的属性了,我们可以使用这个属性进行动态调整图片的宽度,其中原理在于通过不断获取range的值,并赋予给所需要的图片,进而达到动态改变图片的效果.下面贴出具体的代码,主要参照了 ...

JavaScript--鼠标滚动改变图片大小

鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值:

通过鼠标滚轮 ...

Js/使用js来改变图片的url

1.使用js的方式来改变url地址: $('#a1').attr("src","test1.jpg");这种方式来改变图片的url地址: 而不是采用$('#a1 ...

css sprite---css精灵网页图片应用处理方式分析

CSSSprites,在前端图片处理中经常用到的一种高效方法,下面参考百度百科的总结,非常到位,学习一下吧! CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页 ...

使用jQuery动态改变图片显示大小

当我们要显示后台传过来若干个尺寸不一的图片时,为了保证图片大小的一致性及比例的协调,需要动态改变图片显示尺寸.通过搜索,我们可以从网上找到实现此 功能的jQuery代码如下.这段代码可以使图片的大小保 ...

jQuery 实现改变图片指定区域的颜色

javascript本身无法改变图片的颜色,不过我们可以通过一些技巧来实现一样的效果. 1.首先我们要知道图片哪些区域需要改变颜色,这里我们可以用执点地图的方法来弄 例1:

随机推荐

UML的类图、时序图表示方法以及惯例

说明:http://wenku.baidu.com/link?url=DEaRFyVIAH4kZ7TolplfFhFhmAk3gFaNSOH7XPzfTnCWY4CB ...

V$RECOVERY_PROGRESS

v$recovery_progress视图可以用来监控数据库recovery操作,以及所需时间的估算.此外,可以用来监控physical standby环境的redo应用速度. SQL> sel ...

linux常用脚本

转载于http://justcoding.iteye.com/blog/1943504 我们在运维中,尤其是linux运维,都知道脚本的重要性,脚本会让我们的 运维事半功倍,所以学会写脚本是我们每个l ...

nyoj 1129 Salvation 模拟

思路:每个坐标有四种状态,每个点对应的每种状态只能走一个方向,如果走到一个重复的状态说明根本不能走到终点,否则继续走即可. 坑点:有可能初始坐标四周都是墙壁,如果不判断下可能会陷入是死循环. 贴上测试 ...

vs2013和.net 4.5.1调用.net core中的Kestrel(基于libuv)的http服务器代码 两种方式

nuget获取相关的包:两个:Microsoft.AspNetCore.Server.Kestrel 和 Microsoft.Extensions.Logging.Console 编译完成后手工将pa ...

【BZOJ】4361: isn

题解 可以想一下保留一个长度为k的不降序列方案数是\(f[k] (n - k)!\) \(f[k]\)是有多少个长度为k的不降序列 我们去掉不合法的,一定是前一次操作的时候有一个长度为\(k + 1\ ...

React 属性和状态的一些总结

一.属性 1.第一种使用方法:键值对

PowerShell管理SCOM_批量设置维护模式(上 )

#定义存储需要置为维护模式的计算机名称列表 $serverlist = "C:\scomm\servers.txt" #定义脚本执行结果的输出位置 $server_maintena ...

SQL注入原理&分类&危害&防御

SQL是什么? 结构化查询语句 SQL注入是什么? 是一种将SQL 语句插入或添加到用户输入的参数中,这些参数传递到后台服务器,加以解析并执行 造成注入的原因/原理? 1.对用户输入的参数没有进行严格 ...