图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。

对于标准浏览器(如Chrome/Firefox),或者IE7/8浏览器,直接使用max-width,max-height;或者min-width,min-height的CSS属性即可。如: 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

  1. </pre><pre name="code" class="plain">img {
  2. max-width:100px;
  3. max-height:100px;
  4. overflow:hidden;
  5. }
 
 
 

对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code中嵌入javascript code来实现图片的缩放:

  1. img {
  2. width:expression(this.width>150?"150px":this.width);
  3. height:expression(this.height>150?"  150px":this.height);
  4. }

一个比较好的解决方案:

  1. img {
  2. border:0;
  3. margin:0;
  4. padding:0;
  5. max-width:150px;
  6. width:expression(this.width>150?"150px":this.width);
  7. max-height:150px;
  8. height:expression(this.height>150?"  150px":this.height);
  9. }

这样当图片的高度或宽度若超过150px,将会按比例压缩成150px,如果不超过则按原大小显示。

用CSS控制图片大小显示的方法的更多相关文章

  1. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  2. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  3. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  4. vue打包后js和css、图片不显示,引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  5. dedecms5.7二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法

    dedecms5.7(织梦CMS5.7)二级域名文章图片不显示修改方法.相对路径改为绝对路径的方法 dedecms升级到5.7SP1后,开启二级域名,你会发现,在二级域名下的文章,上传的图片地址都是: ...

  6. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  7. UIWebView加载html 图片大小自适应的方法汇总

    方法一 处理HTMLString的方法: NSString *htmls = [NSString stringWithFormat:@"<html> \n" " ...

  8. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  9. CSS自动控制图片大小的代码

    img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...

随机推荐

  1. art-template-loader:template

    ylbtech-art-template-loader: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:ht ...

  2. C#使用NPOI读取电子表格Excel到DataGridView中

    上篇博文中已经介绍了如何写入Excel文件.这篇再介绍一下 如何从Excel中读取数据并保存到DataGridView中. 从Excel中读取数据并保存至DataGridView中,Excel文件第一 ...

  3. Android Studio配置使用git

    一.准备 如果没有安装git,那么先要到到Git官网下载git,然后按照提示一步一步安装即可,这个没有什么难度,不过要记得安装的目录. 二.Android Studio配置git File->S ...

  4. Windows X64平台搭建Java开发环境

       JDK下载路径:www.oracle.com/technetwork/java/javase/downloads/index.html 下载JDK(Java Develop Kit) (1)针对 ...

  5. call apply bind 的区别

    1.call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以 var xw={ name: "小王", gender: &q ...

  6. 大富翁开发日记:一、使用巨型lua协程

    一个大胆的尝试:使用巨型lua协程来表示整个“一局”流程. lua协程是一个很另类的功能,有并发的影子但又不是真的并发,所以真正拿它来做大功能框架的范例不多,通常用于一些小型trick式设计.但这次我 ...

  7. 【eclipse-js验证】

    第一步:去除eclipse的JS验证:将windows->preference->Java Script->Validator->Errors/Warnings->Ena ...

  8. C#文件监控工具(对追加内容的监控并输出)

    C#文件监控(对追加内容的监控并输出),适合监控某个目录下的日志文件(log),开发初衷是linux上部署在jexus部署网站后想实时输出jexus的log和自己站点的log文件(已经测试通过在mon ...

  9. centos运行netcore error:package: ‘Microsoft.AspNetCore.Antiforgery‘, version: ‘2.0.3‘

    Error: An assembly specified in the application dependencies manifest (*.*.deps.json) was not found: ...

  10. .Net Core 扩展使用Refit

    .Net Core 扩展使用Refit 标签(空格分隔): 未分类 在.net core 2.1当中,目前可以是用HttpClientFactory进行Http的调用,它的使用方法我不再多说,具体参见 ...