img {
max-width: 800px;
height: auto;
}

代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有正确的长宽比,不至于因为被调整宽度而变形。

实用例子(未经测试————————————————————)
  WordPress自动调整图片大小
  1、打开你的“样式表 (style.css)”文件,然后在 p img{ 或类似的地方添加下列代码(可以将所有550改成你想要的宽度)
代码如下
p img{
max-width: 550px;
width: expression(this.width > 550 ? "550px" : true);
height: auto;
}
这里是我实际中用到的一个设置样式
<style type="text/css">
#content img{max-width: 250px; height: auto; }
</style>

CSS自动控制图片大小的代码的更多相关文章

  1. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  2. CSS控制图片大小

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

  3. css限制图片大小,避免页面撑爆

    /*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100 ...

  4. CSS强制图片大小

    相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style type ...

  5. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  6. 实现图片大小的自动控制( 图片大小控制CSS代码)

    图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...

  7. mui-图文列表 图片大小问题

    下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...

  8. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  9. Css Sprite 图片等比缩放图片大小

    图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?1. 首先看下如何以40*40显示第二张图片: 正常显示css代码 .sprite { background-image: ur ...

随机推荐

  1. Perl脚本学习经验(三)--Perl中ftp的使用

    使用use Net::FTP;Demo:    my $Server = '192.168.1.1';    my $User = 'admin';    my $Password = 'admin' ...

  2. python中 __name__及__main()__的使用

    python中 __name__及__main()__的使用 #hello.py def sayHello(): str="hello" print(str); if __name ...

  3. java学习之线程

    一.线程总述: 线程是java当中一个重要的内容,如果想说线程的话,那我们应该先来讲一下什么是进程. 进程:那么什么是进程呢,进程从字面上来理解就是,正在进行的程序.就比如说我们在windows当中打 ...

  4. Android——显示当前运行所有服务,判断服务是否运行

    1.显示系统当前所有运行服务: ActivityManager am = (ActivityManager) MainActivity.this.getSystemService(Context.AC ...

  5. 最小生成树之Prim算法,Kruskal算法

    Prim算法 1 .概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图里搜索最小生成树.意即由此算法搜索到的边子集所构成的树中,不但包括了连通图里的所有顶点(英语:Vertex (gr ...

  6. Bzoj 3505: [Cqoi2014]数三角形 数论

    3505: [Cqoi2014]数三角形 Time Limits: 1000 ms  Memory Limits: 524288 KB  Detailed Limits   Description

  7. linux 下信号处理命令trap && linux下各种信号的意义

    1.用途说明 trap是一个shell内建命令,它用来在脚本中指定信号如何处理.比如,按Ctrl+C会使脚本终止执行,实际上系统发送了SIGINT信号给脚本进程,SIGINT信号的默认处理方式就是退出 ...

  8. 【Hibernate】--实体状体与主键生成策略

    一.Hibernate三种状态 (1).瞬时状态(只存在Hibernate容器中,数据库中没有与之对应的记录) A.通过new实例化的实体,在没有执行save方法时. B.持久状态调用delete方法 ...

  9. spring使用ehcache

    spring本身内置了对Cache的支持,之前记录的是基于Java API的ConcurrentMap的CacheManager配置,现使用ehcache实现. 1.声明对cache的支持 <b ...

  10. linux 入侵检查转载

    转载 本文给大家收集整理了一些审查Linux系统是否被入侵的方法,这些方法可以添加到你运维例行巡检中. 1. 检查帐户 代码如下: # less /etc/passwd # grep :0: /etc ...