CSS样式等比例控制图片大小
比较简单,主要是用height:auto和max-width
例如:
img{max-width:600px; width:expression_r(this.width > 600 ? "600px" : this.width); height:auto}
一、网页制作技巧实例解决:用CSS控制图片自适应大小
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?
我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:
div img { max-width:600px; width:600px; width:expression_r(document.body.clientWidth>600?"600px":"auto"); overflow:hidden; }
◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
二、有时候图片太大,会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度
css代码如下:
img,a img{ border:0; margin:0; padding:0; max-width:590px; width:expression_r(this.width>590?"590px":this.width); max-height:590px; height:expression_r(this.height>590?"590px":this.height); }
这样当图片的高度或宽度若超过590px,将会按比例压缩成590px,如果不超过则按原大小显示。
(资源库 www.zyku.net)
您可能感兴趣的文章
- 05-11修改CSS样式实现网页变灰色/黑白代码的几个方法整理
- 04-17word中批量修改图片大小的方法
- 01-12抓乐达人-抓乐达人应用软件功能介绍
- 03-31红米k40pro取消游戏加速教程
- 12-10小米air2se如何重新连接手机
- 07-05Linux sleep命令
- 11-26苹果13相机广角镜头在哪开
- 09-28抖音购买电影票教程介绍
- 03-30opporeno5k系统分身设置教程
- 02-08关于Numpy之repeat、tile的用法总结
- 01-12阿秒打卡-阿秒打卡应用软件功能介绍
- 01-09卓越优化助手-卓越优化助手应用软件功
- 01-12dedecms制作英文站需要修改的地方
- 01-12环球客Star-环球客Star应用软件功能介
- 01-25Python爬虫之获取心知天气API实时天气
- 04-15小米11ultra智能双卡切换教程
- 09-20小米手机关闭分身提醒方法介绍
- 12-30一机游丽水-一机游丽水应用软件功能介
- 01-09智能门金管家-智能门金管家应用软件功
- 07-26帝国CMS7.5版栏目列表式新增支持附加S
最近更新
阅读排行
猜你喜欢
- 11-02百度地图怎么上门汽车充电
- 09-24魅族18s值得入手吗
- 09-17华为手环6NFC功能在哪里
- 06-23PS设计艺术字作为logo图案的方法
- 02-06oppo手机开启睡眠模式方法
- 12-08小度在哪里设置还原出厂模式
- 03-19APAAS、PAAS、SAAS的区别是什么?
- 01-12CAD DWG手机看图-CAD DWG手机看图应用
- 12-15iqoo8怎么设置自动锁屏
- 02-18mongodb+php实现简单的增删改查