繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实现的图片宽高自适应固定边框
- CSS样式表
- Flash页面如何通过校验
- 静态页面加密
- 如何禁止打印页面
- 比较不错的打印效果 css
- !important在ie7.0的hack方法
- 最基本的几种 CSS 文字滤镜效果
- HTML中的图象标签属性
- marquee的详细用法解析
- 使用#default#userdata组件实现的可记忆内容的编辑器
- li的简单应用(将前面的点换成图标)
- windows的listview一样,而且不能把表头从表格里面独立出来
- 一些不标准的东西，不过还是有点用处
- 用js控制css的不错的方法
- CSS解决未知高度垂直居中
- 在线ASC码查询
- 关于CSS：优先级
- 文字或图片元素在DIV中垂直居中
- Mozilla建议的CSS书写顺序
- 微软终于对网页三剑客下手了
- div＋css布局入门
CSS样式表 中的 CSS实现的图片宽高自适应固定边框
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 158 ::
收藏到网摘: 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
