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 ...
随机推荐
- Linux 安装Maven和nexus代理仓库
1 说明 2 安装步骤 2.1 下载地址 2.2 MAVEN安装步骤 2.2.1 解压Maven安装包 2.2.2 配置环境变量 2.3 Sonatyp ...
- Uncompressing Linux___ done, booting the kernel_tekkamanninja-ChinaUnix博客
今天用主线Linux内核移植到MINI6410,主线内核2.6.37.1基本已经支持了MINI6410的板子,所以移植到能够启动起来的阶段很简单,但是在移植的时候还是出现了一个比较常见的问题: MIN ...
- sharepoint 2010 列表数据分页控件介绍 pagination UserControl
转:http://blog.csdn.net/chenxinxian/article/details/8714391 这里主要是介绍下最近开发的一个sharepoint列表或者文档库的分页控件,并且把 ...
- sharepoint 2010 如何创建文档库内容类型content type
转:http://biancheng.dnbcw.info/linux/441643.html 这次主要是记录下,如何来创建文档内容类型,例如新建文档的时候,可以选择不同模板,有word,excel文 ...
- 【Android 复习】 : Activity之间传递数据的几种方式
在Android开发中,我们通常需要在不同的Activity之间传递数据,下面我们就来总结一下在Activity之间数据传递的几种方式. 1. 使用Intent来传递数据 Intent表示意图,很多时 ...
- (转载)MySQL数据类型中DECIMAL的作用和用法
(转载)http://database.51cto.com/art/201005/201651.htm 在MySQL数据类型中,例如INT,FLOAT,DOUBLE,CHAR,DECIMAL等,它们都 ...
- POJ ---2531
Network Saboteur Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 8751 Accepted: 4070 ...
- Red and Black
Red and Black Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- HDU-2549 壮志难酬
壮志难酬 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- Bzoj 1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 二分
1609: [Usaco2008 Feb]Eating Together麻烦的聚餐 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1272 Solve ...