zoukankan      html  css  js  c++  java
  • <转载>使用css让大图片不超过网页宽度

    让大图片不超过网页宽度,让图片不撑破通过CSS样式设置的DIV宽度!

    接下来,我们来介绍下网站在开发DIV+CSS的时候会遇到一个问题,在发布一个大图片的时候因为图片过宽会撑破自己设置的div宽度的问题。

    图片撑破布局原因
    1、由于浏览器版本低(微软IE6)
    2、没有设置div布局的宽度

    解决图片超出宽度或撑破div css布局方法
    1、在文章中发布图片的时候将图片编辑缩小
    2、通过对对应div的css来设置显示的图片最宽宽度 推荐
    3、通过css对图片设定宽度。

    通过css来解决图片撑破div布局案例
    通过css来控制代码如下(cmcss是对应父级类名):
    .cmcss {margin: auto; 600px;}
    .cmcss img{max- 100% !important; height: auto!important; expression(this.width > 600 ? "600px" : this.width)!important;}这种图片第一次加载时候图片不能显示

    直接通过对对应的div内的内容图片宽度设置代码如下:
    .cmcss img{ 500px;} 宽度自定,但是不推荐此方法,因为设置后此div布局内的图片将全部宽度为500px,那样将造成图片小的,被放大显示模糊。

    可以通过对图片设置最宽css可以使用max-width来设置,但是IE6不支持,但是可以使用浏览器的css hack来设置代码如下
    .cmcss img{max-500px;_500px;}
    说明:通过其他浏览器不支持带“_”的css,但是IE6支持。刚好可以通过此css hack来实现对图片宽度的现在。这里只能克服IE6显示固定的宽度来符合其它版本的兼容性。

    扩展与提高
    我们看区别不同浏览器CSS HACK的代码
    区别FF,IE7,IE6:
    background:orange;*background:green !important;*background:blue;
    你可能要问了,为什么不用“*”来代替“_”来区别IE6浏览器,这里值得注意的是ie6和IE7都会解释和识别“*”的,但是IE7对 important的识别具有优先全,所以IE7在CSS代码中有important将有优先识别并成为唯一性,所以在有important时候IE7和 IE6前面都可以用“*”号,但是无论带important在前或在后IE7将识别为唯一区别css hack。所以这里没有important的时候需要用另外IE6的css hack中“_”小写半角下划线。
    案例如下(Blue hills.jpg图片为800像素宽的图片)
    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>www.divcss5.com案例-图片不超过设置宽度</title>

    <style type="text/css">
    <!--

    .cmcss img{ max-150px;_150px;}
    -->
    </style>
    </head>

    <body>
    原始图片宽度为800PX,设置后如下图为150px
    <div class="cmcss"><img src="Blue hills.jpg" /></div>
    </body>
    </html>

    截图如下:


    通过此方法对图片的宽度设置最大宽度为多少,css代码少方便,推荐此方法来解决图片撑破div css布局的宽度。

  • 相关阅读:
    flush logs
    slave-skip-errors,sql_slave_skip_counter
    稀饭
    table
    profiles
    索引使用规范
    innodb_rollback_on_timeout
    mysql账号管理
    跨库复制
    linux.sh
  • 原文地址:https://www.cnblogs.com/tianxuan/p/4836861.html
Copyright © 2011-2022 走看看