zoukankan      html  css  js  c++  java
  • 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

    可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

    对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:


     
    1. </pre><pre name="code" class="plain">img {    
    2.   max-100px;    
    3.   max-height:100px;    
    4.   overflow:hidden;    
    5. }    



     
     
     

    对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:


     
    1. img {     
    2.   expression(this.width>150?"150px":this.width);     
    3.   height:expression(this.height>150?"  150px":this.height);     
    4. }    

    一个比较好的解决方案:


     
    1. img {     
    2.   border:0;     
    3.   margin:0;     
    4.   padding:0;     
    5.   max-150px;     
    6.   expression(this.width>150?"150px":this.width);     
    7.   max-height:150px;     
    8.   height:expression(this.height>150?"  150px":this.height);     
    9. }    


    这样当图片的高度或宽度若超过150px,将会按比例压缩成150px,如果不超过则按原大小显示。

  • 相关阅读:
    android 6.0 新特性
    接口_ _接口回调机制
    bug_ _
    volley_缓存介绍
    bug__android studio 出现布局文件不提示,且点击代码不能跟踪代码
    文章--笔记本蓝牙可以搜索到手机,但是怎么连接不了?
    Dialog_ _dialog系统样式讲解 及 透明背景
    动画_ _ Android应用开发之所有动画使用详解
    view坐标_ _ Android应用坐标系统全面详解
    html__脚本之家
  • 原文地址:https://www.cnblogs.com/gxbk629/p/3969669.html
Copyright © 2011-2022 走看看