用css来控制图片大小显示的实现方法与代码_经验交流

有时候图片太大,会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度
css代码如下:
img,a img{
border:0; 
margin:0; 
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}
这样当图片的高度或宽度若超过590px,将会按比例压缩成590px,如果不超过则按原大小显示。

时间: 2024-08-03 22:11:20

用css来控制图片大小显示的实现方法与代码_经验交流的相关文章

css Sprites小实例代码_经验交流

这是一个很简单的应用,不过在设计中,这样做可以减轻服务器的压力,是请求次数减少,是一个不错的方法. 特别要说明的是,在这种小图片上即使是两张图片其实就响应时间来说也慢不了多少,不过有一个问题,就是两张图片交替时容易出现背景图片从新加载而导致很段时间不显示的效果.(时间长短视服务器的响应速度和图片大小而变化) 下面是css的部分: body {   font-family: "Lucida Sans", "Lucida Sans Unicode";   font-si

用CSS来控制图片显示大小的代码_经验交流

复制代码 代码如下: img,a img{      border:0;       margin:0;       padding:0;      max-width:590px;      width:e­xpression(this.width>590?"590px":this.width);      max-height:590px;      height:e­xpression(this.height>590?"590px":this.he

CSS样式控制图片裁切显示

css|控制|显示 我们在论坛新闻系统的时候,其中的有些图片会比较大破坏了整体布局的美观,现通过CSS定义方式使图片进行裁切显示,即,当图片的容器不足以显示整个图片时,会以左上角为开始显示,不足显示的将会隐藏.相关各位同仁也有此想法.现有以下CSS样式,所以贴出来同各位WEB 开发者共享! 当然有人用img 的onload 事件对其宽高进行js控制,不过经招有时会因网页加载过快,或过慢而来不及执行,现向大家推荐代码如下,自行研究. <html><head><meta http

校内网css代码添加背景图片常用代码_经验交流

序号 中文说明 标记语法 备注 1 背景颜色 {background-color:数值} 2 背景图片 {background-image: url(URL)|none} 3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y} 4 背景固定 {background-attachment:fixed|scroll} 5 背景定位 {background-position:数值|top|bottom|left|rig

使用CSS解决文字环绕图片问题的代码_经验交流

上图是美工为一站点制作的图文并茂的新闻标题列表,采用表格进行布局,右上和下部分分布在两个单元格中,程序实现起来可不太容易:要么分两次查询,一次取4条,一次取5条:要么一次取出9条,再分在两个单元格中显示.能不能通过设置图片的属性,让文字和图片像Word中一样可以四周环绕对齐?这样程序就不用理会图片,只负责一次读取显示就可以了.经测试将图片的float属性设置为left可解决我们的问题,效果如下图: ·新闻标题列表 ·新闻标题列表 ·新闻标题列表 ·新闻标题列表 ·新闻标题列表新闻标题列表 ·新闻

用CSS给图片打标的代码_经验交流

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页_经验交流

作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和

CSS技巧DIV为空时占据空间的解决办法_经验交流

此时在IE中到底是什么在影响着最终的显示,又是如何解析的呢? 可能的影响因素:字体大小(font-size),字体行高(line-height),高度(height),溢出(overflow) 我们对上面的代码逐一添加过滤属性(具体的过程有兴趣的朋友,可以私下里实验一下,"自己动手,丰衣足食"!) 在测试的过程中,你会发现IE6和IE7的解析也不尽相同,比如在给div设置了line-height:0; height:0; 的样式后,IE7中显示正常了,不再占据物理空间了,而IE6却依然

用js实现的DIV+CSS编辑器代码_经验交流

在线DIV+CSS编辑器 类/标签/ID: 所有数值都不用输入单位; 宽: 高: 背景色: 前景色: 边框: 颜色:选择soliddottednonehiddendasheddoublegrooveridgeinsetoutset 外间距 Margin : 如:10px 2px 内间距 Padding: 如:10px 2px 浮动: 左 右 × 显示:选择 block inline none 可见:可见 隐藏 × 文本对齐:选择leftcenterright 行高:%无px 文字缩进: 文本: