用CSS控制图片大小显示的方法
2024-08-24 10:33:15
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？
可以通过按比例缩小或者放大到某尺寸（自己指定），来保持图片不变形走样的完全显示。
对于标准浏览器（如Chrome/Firefox），或者IE7/8浏览器，直接使用max-width,max-height；或者min-width,min-height的CSS属性即可。如： 我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。我们看下面的代码：
- </pre><pre name="code" class="plain">img {
- max-width:100px;
- max-height:100px;
- overflow:hidden;
- }
对于IE6及其以下版本的浏览器，则可以利用其支持的expression属性，在css code中嵌入javascript code来实现图片的缩放：
- img {
- width:expression(this.width>150?"150px":this.width);
- height:expression(this.height>150?" 150px":this.height);
- }
一个比较好的解决方案：
- img {
- border:0;
- margin:0;
- padding:0;
- max-width:150px;
- width:expression(this.width>150?"150px":this.width);
- max-height:150px;
- height:expression(this.height>150?" 150px":this.height);
- }
这样当图片的高度或宽度若超过150px，将会按比例压缩成150px，如果不超过则按原大小显示。
最新文章
- 评《撸一段 SQL ? 还是撸一段代码？ 》
- Centos7安装完毕后无法联网的解决方法
- NDT（Normal Distribution Transform） 算法（与ICP对比）和一些常见配准算法
- PHP基础班初学感悟
- 模具厂MES项目介绍
- oracle 触发器学习
- c#接口容易被忽视的问题
- [Git]在Windows上安装Git
- Cobbler自动化批量安装linux服务器的操作记录
- C++ Get Current Time 获取当前时间
- 【C51】单片机独立按键与矩阵按键
- android 开发解密时出现pad block corrupted 错误
- Web —— java web 项目开发 笔记
- jQuery中$.getJSON的返回值问题
- 【转载】BAT 批处理脚本教程
- shell之 printf 输出语句
- Linux显示工作路径
- 分享一个在线生成微信跳转链接实现微信内跳转浏览器打开URL的工具
- FlatList 核心运用
- Effective Java 第三版——5. 使用依赖注入取代硬连接资源