网页素材: 导航菜单选项卡滑动门焦点图图片切换下拉菜单弹出层Tabs链接提示

您的当前位置: 源码爱好者 » 网页制作教程(编程教程) » CSS技术教程

CSS控制图片自适应Div大小

  • 标签:图片自适应 更新时间:2014-02-04
  • CSS让图片自适应Div大小,对宽度执行CSS的expression指令,这个指令会在客户端被执行,当用户最大化显示窗口或缩放窗口时控制图片按比例适应Div宽度的大小。以下来看完整的示例代码如下:

    <!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>CSS图片自适应Div大小</title>
    <style type="text/css">
    body {font-size: 12px; text-align: center; margin: 0px; padding: 0px;}
    #pic{margin:0 auto; width:800px; padding:0; border:1px solid #333;}
    #pic img{max-width:780px;width:expression(document.body.clientWidth > 780? "780px": "auto");border:1px dashed #000;}
    </style>
    </head>
    <body>
    <div id="pic">
    <img src="/jscss/demoimg/wall9.jpg" alt="图片自适应"/>
    </div>
    </body>
    </html>

    浏览器窗口最大化后可看到图片自适应的效果,请替换IMG标签中的图片地址为一个有效的图片地址,以便查看效果。

  • 已读: 次 收藏本文关闭本文打印本文复制链接
处理 SSI 文件时出错