CSS自动控制图片大小的代码
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自动控制图片大小的代码的更多相关文章
- 用CSS控制图片大小显示的方法
图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...
- CSS控制图片大小
转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片: 对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...
- css限制图片大小,避免页面撑爆
/*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100 ...
- CSS强制图片大小
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决. 该CSS的功能是:大于600的图片自动调整为600显示. <style type ...
- div+css+jQuery图片横向滚动代码(带左右点击按钮)
首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...
- 实现图片大小的自动控制( 图片大小控制CSS代码)
图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...
- mui-图文列表 图片大小问题
下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...
- FE: CSS固定图片显示大小及GitHub Pages在线演示
CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...
- Css Sprite 图片等比缩放图片大小
图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?1. 首先看下如何以40*40显示第二张图片: 正常显示css代码 .sprite { background-image: ur ...
随机推荐
- [Socket]BSD Socket网络通信
http://blog.csdn.net/dongfengsun/article/details/4802925 文章有一些错误 #define KENTER @"/r/n" 应该 ...
- C++11内存模型的一些补充阅读材料
<Intel Threading Building Block> O'REILLY Chapter 7 Mutual Exclusion - Atomic Operation - Memo ...
- ☀【jQuery插件】DOM 延迟渲染
test.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...
- Base64上传图片
#region 上传图片 [HttpPost]/// <summary>/// 上传文件 jpg图片/// </summary>/// <param name=" ...
- [转]NHibernate之旅(7):初探NHibernate中的并发控制
本节内容 什么是并发控制? 悲观并发控制(Pessimistic Concurrency) 乐观并发控制(Optimistic Concurrency) NHibernate支持乐观并发控制 实例分析 ...
- scp 在不同主机之间数据传输
不同的Linux之间copy文件常用有3种方法,第一种就是ftp,也就是其中一台Linux安装ftp Server,这样可以另外一台使用ftp的client程序来进行文件的copy.第二种方法就是采用 ...
- RIDE常用快捷键
重命名: F2 搜索关键字: F5 执行用例: F8 创建新工程: Ctrl+N 创建新测试套: Ctrl+Shift+F 创建新用例: Ctrl+Shift+T 创建新关键字: Ctrl+Shift ...
- Linux学习笔记32——select()函数分析【转】
Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如 connect.accept.recv或recvfrom这样的阻塞程序 ...
- Unity给力插件之ShaderForge(一)
这是一个用来制作shader的插件,也是一个很好的学习shader的工具.这个插件上手很容易,但是要用它来制作理想的Shader,需要下点功夫. 这儿先列举出基础知识,以及我的一些实践.以后我还会继续 ...
- javascript日志框架使用
1.在页面中引入js文件 官网:http://log4javascript.org/index.html ```javascript <script src="http://cdn.b ...