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

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

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

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

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

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

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

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

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

有些按钮可以用<a><img /></a>的方法制作,<img />会很方便的自适应。

但<input />要怎么办呢?

只有用CSS做背景。

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

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

background:url(../images/uploadbtn.png) center no-repeat #ff1300; background-size:296px 55px; 
background-size:可以轻松把500x93乃至更大的图片,缩小至296x55。

这样不论是<img />还是<input />这样的标签,用大图来显示高像素密度的小图都成为可能。

												

CSS也可以改变图片幅面尺寸的更多相关文章

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

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

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

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

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

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

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

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

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

    鼠标滚动改变图片的大小: 原理:当鼠标滚动时改变了zoom的值: <!DOCTYPE HTML> <html> <head> <title>通过鼠标滚轮 ...

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

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

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

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

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

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

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

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

随机推荐

  1. db4o官方停止支持及面向对象数据库的一些感想

    前一段时间试用了db4o,真心认为不错.但自己在国内搜索了一下,并没有找到不论什么一个专门的论坛和面向对象的数据库产品.深感这东西在国内并没有太普及. 但自己试用认为这个东东真心不错(当然也有自己的优 ...

  2. android 38 Abdroid客户端和服务端交互

    服务端: package com.sxt.day05; import java.io.IOException; import java.util.ArrayList; import javax.ser ...

  3. innodb结构解析工具---innodb_ruby

    1.下载ruby并安装ruby: ftp://ftp.ruby-lang.org/pub/ruby/ ftp://ftp.ruby-lang.org/pub/ruby/ruby-2.3-stable. ...

  4. gprof + kprof + gprof2dot (性能 与 函数调用图)-

    http://www.cnblogs.com/rocketfan/archive/2009/11/15/1603465.html http://blog.csdn.net/stanjiang2010/ ...

  5. C++链表与键值对

    <算法>一书中,在算法3.1中提到了Map的实现,这里根据书上的思想,用单向链表简单写了写. #ifndef SEQUENTIAL_H #define SEQUENTIAL_H templ ...

  6. codevs 1817 灾后重建

    /* 暴力暴力 离线每次添边 堆优化dij 70 SPFA 80..... */ #include<iostream> #include<cstdio> #include< ...

  7. js获取图片高度

    js获取图片高度时经常会获取的图片高度为0,原因是图片未加载完毕.第一次加载时,显示0(火狐等部分浏览器显示24).待加载完毕后,再刷新,显示图片高度258. var oImg = document. ...

  8. 快速打出System.out.println("");

    sysout---->Alt+/--->System.out.println():

  9. 表达式:使用API创建表达式树(6)

    一.ConstantExpression:表示具有常量值的表达式.因为表达式应用过程中,参数据多是 Expressions 类型,算是对常量值的一种包装吧. ConstantExpression使用比 ...

  10. 多线程lock(instance)中instance的选择.

    如我的提问:http://bbs.csdn.net/topics/390496351?page=1#post-394837834 拥有类原子功能的类: class ShareState { //原子功 ...