繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实现的图片宽高自适应固定边框
- CSS样式表
- 通过实例学习CSS布局网页
- CSS网页布局实例 常见的12种网页布局
- CSS教程 伪清除浮动
- CSS 关于浮动
- 关于css display: inline block inline-block的区别分析
- CSS 日期垂直排列的两种技巧
- CSS 三栏等高布局实现方法
- IE6 注释引起的文字溢出和浮动错位的解决思路
- 15个必须阅读的CSS入门文章
- CSS样式表与具体设备表示
- CSS 层叠加的5条原则
- 检测用户浏览器是否支持CSS3的方法
- CSS 选择器支持列表
- clip 剪裁矩形实现代码
- common.css文件 网页设计常用的基本css控制
- 再谈动态添加样式规则的方法
- HTML/CSS对浏览器的判断
- CSS 文件命名规则
- 用 CSS 让你的按钮(button)更加迷人
- CSS 背景属性5个应用实例.
CSS样式表 中的 CSS实现的图片宽高自适应固定边框
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 126 ::
收藏到网摘: n/a
关键在于：max-width:780px;以及下面那行。
固定像素适应:
以下是引用片段：
<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="/articleimg/2006/03/3297/koreaad_10020.jpg"/>
</div>
</body>
</html>
百分比适应:
以下是引用片段：
<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>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
border:1px dashed #000;
}
-->
</style>
</head>
<body>
<div id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg"/>
</div>
</body>
</html>
评论 (0) All
