您的位置：首页 > Web前端 > CSS

纯CSS自适应图片大小

2015-11-03 16:24 771 查看

只使用CSS使得图片自适应其大小，下面有两种方式，

一种是按百分比自适应其大小：

<!--body { font-size: 12px; text-align: center; margin: 0; padding: 0; } #picPre{ margin:0 auto; width:90%; padding:0; border:1px solid #333; } #picPre img{ max-width:80%; width:expression(document.body.clientWidth>document.getElementById("picPre").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; } -->

效果如下：

二种是按固定宽高自适应其大小：

<!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #picFix{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #picFix img{ max-width:780px; width:expression(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } -->

效果如下：

前台调用：

<div id="picFix"><img src="mm1.jpg" /></div>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航