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. ruby面向对象class

    ruby对象是严格封装的:只能通过定义的方法访问其内部状态.方法使用的成员变量在对象外部不能直接访问,不过可以通过getter.setter等访问器方法(accessor),使他们看起来好像是直接访问 ...

  2. 16位cpu下主引导扇区及用户程序的编写

    一些约定 主引导扇区代码(0面0道1扇区)加载至0x07c00处 用户程序头部代码需包含以下信息:程序总长度.程序入口.重定位表等信息 用户程序 当虚拟机启动时,在屏幕上显示以下两句话: This i ...

  3. WPF开源UI框架推荐 Modern UI

    稍后追加,详细教程 http://mui.codeplex.com/

  4. CSS浏览器兼容性----Hack

    CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器.类内部Hack:比如 IE6能识别下划线&quo ...

  5. 理解newid()和newsequentialid()

    原文地址:http://blog.csdn.net/xushichang/article/details/4390957 1.:newsequentialid 函数比起 newid 函数最大的好处是: ...

  6. java的IO学习,字节流与字符流的编码讲解

    字节流与字符流 字节流可以处理所有类型的数据(图片.视频等),在java中对应的类都为“stream”结尾 1字节=8位二进制=具体存储空间   字符流仅能处理纯文本的数据,在java中对应的类都是以 ...

  7. 修复直接删除linux系统后grub丢失错误

    如果删除了系统后,grub丢失,开机出现“grub>”的话,可以用如下代码进入目标linux系统:grub>ls (hd0,X)/boot             //x为目标系统所在分区 ...

  8. curl测试puppet http api接口

    ---恢复内容开始--- 基于证书密钥对 curl --cert /etc/puppetlabs/puppet/ssl/certs/master.puppet.org.pem --key /etc/p ...

  9. hdoj 5461 Largest Point

    Largest Point Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  10. hdoj 2401 Baskets of Gold Coins

    Baskets of Gold Coins Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...