zoukankan      html  css  js  c++  java
  • CSS也可以改变图片幅面尺寸

    一般情况下,只有<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 />这样的标签,用大图来显示高像素密度的小图都成为可能。

    
    
  • 相关阅读:
    [linux]w命令和uptime命令查看系统负载
    Gherkin关键字
    Navicat Premium常用快捷键
    linux如何手动释放linux内存
    IDEA报compilation failed:internal java compiler error解决方法
    App功能测试的7大注意点
    手术切口类别
    JAVA中关于Map的九大问题
    Web前端开发规范文档
    Java6 WebService的发布
  • 原文地址:https://www.cnblogs.com/haimingpro/p/3336928.html
Copyright © 2011-2022 走看看