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,如果不超过则按原大小显示。

  • 相关阅读:
    ubuntu16.04 下anaconda3安装教程
    conda基本知识
    caffe学习三:使用Faster RCNN训练自己的数据
    labelImg
    caffe学习二:py-faster-rcnn配置运行faster_rcnn_end2end-VGG_CNN_M_1024 (Ubuntu16.04)
    python开发中的高级技巧
    Splash 渲染引擎简介
    Splash 渲染引擎简介
    scrapy框架使用splash渲染引擎爬取动态页面
    scrapy框架使用splash渲染引擎爬取动态页面
  • 原文地址:https://www.cnblogs.com/gxbk629/p/3969669.html
Copyright © 2011-2022 走看看