zoukankan      html  css  js  c++  java
  • 【小技巧】通过css控制图片自动缩放至css定义大小

    在文章的内容区中,通常会有图片。如果图片的尺寸过大,常会把页面结构撑得变形。
    以前,我采用JS来控制,效果还是不错。
    这段时间,一直用DIV+CSS的方式来制作页面,发现用CSS来得更方便,相信处理速度也更高。

    方法如下
    程序代码

    <div class=”UBBPanel”>
    <div class=”UBBTitle”>
    <img src=”images/code.gif” style=”margin:0px 2px -3px 0px” alt=”程序代码”/> 程序代码</div>
    <div class=”UBBContent”>.new_body .con img{vertical-align: middle;max- 630px; expression(this.width >630 && this.height < this.width ? 630: true); }
    </div></div>

    同样可以用对高度进行控制。
    这种方法可以满足: 一个页面中,不同图片,超过所需大小时,自动缩成不同尺寸的需求。
    应用面也很广,比如:一般的CMS等文章管理中,通常都有小图、大图。而我们在页面上,通常需要读取同一个图片,而分不同尺寸显示。再结合 overflow:hidden; 相信图片也就不会变形了。


    程序代码
    .pwl_spaceimg{160px; height:120px;overflow:hidden; }

    .pwl_spaceimg img{150px; border:0px; padding:4px; }

    首先要讲,这个效果最好用js解决。下面是CSS解决方法
    img {
    max-400px;
    _expression_r(this.width<400px?"auto":"400px");
    }
    expression是针对IE6用的,在FF和IE7+版本max-width就行了

  • 相关阅读:
    Smali语法
    css 实现垂直水平居中常用方法
    css border实现三角形
    vue-router学习笔记
    vuex状态管理
    es6 reduce的用法
    vue学习笔记
    chrome调式工具
    前端需要了解的http知识
    underscore.js and moment.js
  • 原文地址:https://www.cnblogs.com/babysay123/p/4507580.html
Copyright © 2011-2022 走看看