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. 【HDOJ】4183 Pahom on Water

    就是一个网络流.red结点容量为2,查看最大流量是否大于等于2.对于条件2,把边反向加入建图.条件1,边正向加入建图. /* 4183 */ #include <iostream> #in ...

  2. efront二次开发记要

    efront系统是一套开源的在线学习系统,是用PHP编写的,内含“考试”功能.该系统的开源的是社区版,虽然看上去功能强大,但使用起来却很不符合国情.为了让公司使用,先做了一次最简化的二次开发,由于是最 ...

  3. MOSS母板页制作 学习笔记(一)

    转:http://xiachanghao1990.blog.163.com/blog/static/4869602420114235536573/ 母版页制作其实应该算是一个比较基础的工作,但是熟练制 ...

  4. android学习——activity的生命周期

    Android中主要组件之Activity的生命周期,基本都是翻译Android API和个人的理解. 首先看一下Android api中所提供的Activity生命周期图: Activity其实是继 ...

  5. HDOJ/HDU 2087 剪花布条(indexOf()应用~~)

    Problem Description 一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢? Input 输入 ...

  6. bzoj 3226 [Sdoi2008]校门外的区间(线段树)

    3226: [Sdoi2008]校门外的区间 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 615  Solved: 227[Submit][Stat ...

  7. uvaLA4255 Guess BFS+拓扑排序

    算法指南白书 思路:“连续和转化成前缀和之差” #include <stdio.h> #include <string.h> #include <iostream> ...

  8. [ZETCODE]wxWidgets教程六:事件处理

    本教程原文链接:http://zetcode.com/gui/wxwidgets/events/ 翻译:瓶哥 日期:2013年12月7号星期六 邮箱:414236069@qq.com 主页:http: ...

  9. [LeetCode] 3. Longest Substring Without Repeating Characters 解题思路

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  10. 采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET

    采集爬虫中,解决网站限制IP的问题? - wendi_0506的专栏 - 博客频道 - CSDN.NET undefined