• <tbody id="mx1tb"></tbody>
    <rp id="mx1tb"></rp>
  • <rp id="mx1tb"></rp>

    <th id="mx1tb"><p id="mx1tb"></p></th>
    <dd id="mx1tb"></dd>

    <th id="mx1tb"><pre id="mx1tb"></pre></th>
    <th id="mx1tb"></th>

    <span id="mx1tb"></span>
    <th id="mx1tb"><pre id="mx1tb"><sup id="mx1tb"></sup></pre></th>
    设为首页 - 加入收藏 湛江站长网 (http://www.morinnbuzz.com)- 中小站长们必上的网站 - 聚焦湛江站长前沿资讯!
    热搜: 网站 站长之家 什么 平台
    当前位置: 首页 > 创业 > 正文

    CSS控制网页中图片的最大宽度和高度

    发布时间:2018-10-22 22:13 所属栏目:[创业] 来源:站长网
    导读:html head style type=text/css !-- img.pic{ max-width:300; max-height:100px; /*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/ width: expression(this.width 300 this.width / 300 = this.h
    <html>
    <head>
    <style type="text/css">
    <!--
    img.pic{
    max-width:300;
    max-height:100px;
    /*由于IE6.0以及以前版本的IE不支持上边两个属性,所以加上以下两条语句.这里要说明的是expression只有IE支持*/
    width: expression(this.width > 300 && this.width / 300 >= this.height / 100 ? 300 : true);
    height: expression(this.height > 100 && this.width / 300 < this.height / 100 ? 100 : true);
    }
    //-->
    </style>

    </head>
    <body>
    <div id="pic">
    </div>
    <img class="pic" src="Blue hills.jpg" />
    </body>
    </html>

    由于上边的代码中,设置最大的长宽是直接用数字的,这样再修改的时候十分不方便,所以做了以下修改:
    <html>
    <head>
    <script type="text/javascript">
    <!--
    Object.MAX_WIDTH = 400;
    Object.MAX_HEIGHT = 300;
    -->
    </script>
    <style type="text/css">
    <!--
    img.pic{
    max-width:300px;
    max-height:100px;
    width: expression(this.width > Object.MAX_WIDTH && this.width / Object.MAX_WIDTH >= this.height / Object.MAX_HEIGHT ? Object.MAX_WIDTH : true);
    height: expression(this.height > Object.MAX_HEIGHT && this.width / Object.MAX_WIDTH < this.height / Object.MAX_HEIGHT ? Object.MAX_HEIGHT : true);
    }
    //-->
    </style>

    </head>
    <body>
    <div id="pic">
    </div>
    <img class="pic" src="Blue hills.jpg" />
    </body>
    </html>
    这样的话,只需要修改Object.MAX_WIDTH和Object.MAX_HEIGHT这两个类变量就可以很方便的修改最大的长宽.

    连续的字母或其他特殊字符导致不能自动换行,解决的办法是使用如下方法

    其实 CSS 里面有一个 style,叫做 word-wrap。把它设为 break-word,然后把单元格宽度定一下,就没有必要在程序里面进行换行了。如下所示。
    table style="table-layout: fixed; word-break: break-all; word-wrap: break-word; overflow-x: hidden" width="500"
    不过注意,在 Mozilla 浏览器里面这个用法似乎不起作用。

    【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

    网友评论
    推荐文章
    金亚洲代理