css 控制img图片的大小样式

很多做网站的朋友都会用width,height加在img标签里面直接来控制图片的大小,这样无疑增加了文件的大小了,并还不能达到比较满意的效果,今天我们来看看我用css来间接的控制图片的大小吧.下面我们先来看个实例.

 代码如下 复制代码

< ul>

  <li><img src='' ></li>

</ul>

我们只要按上面这样就写行了,下面我们来用css进行制作吧.

 代码如下 复制代码

ul li img {
    width:80px;
    height:80px;
    border:1px solid #ccc;
}

ul li a:hover img {
    border-color:#333;
}

加上这段代码后当你指上图片时,它会有一个边框,移去时就会消失,哈哈这种效果不错吧,好了就讲到这里了,

最后申明一下:本站原创文章转载请注明来处: www.111cn.net 中国WEB第一站

时间： 2024-08-02 12:11:21

css 控制img图片的大小样式的相关文章

用CSS控制输入框input悬停交互样式

制作表单的时候,实现鼠标悬停交互效果有多种方法: 1.在xhtml中直接写入onmouseover.onmouseout脚本就可以实现了,但这样就违背了web标准所倡导的内容.表现相分离的原则.以后若要对此进行修改也将会很繁琐.这样直接写入xhtml也会让页面代码增加,如果只是一个input输入框或许是无所谓的,如果是几十个几百个,增加的字节数就很宠大了. 2.在xhtml中加入小脚本,鼠标经过时可以切换CSS.具体内容请看这篇文章.虽然实现了内容.表现相分离,以后的修改也会很方便.但同样会让页

CSS 控制需隐藏的文字样式代码

在一个限定了高宽的容器中放入文字,当文字超出时就会出现杯具,简单的控制使用 CSS 即可: 观察了一下,使用四大金刚即可使此文字超出时自动截去末尾,并加上省略号:  代码如下 复制代码 .words{ width:200px; //限定宽度 white-space:nowrap; //强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象 word-break:keep-all; //对于中文,韩文,日文,不允许字断开 text-overflow:ellipsis; //当对象内文本溢出时

用CSS控制透明图片

这里是一些文字

CSS控制图片代码:让网页图片自适应大小

文章简介:CSS控制图片代码:让网页图片自适应大小. 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600

用CSS如何控制网页中图片自适应大小？

css|控制|网页|自适应 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.clientWidth>600?"600px&qu

用CSS控制图片自适应大小的方法

css|控制|自适应 网页制作技巧实例解决:用CSS控制图片自适应大小 图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码: div img { max-width:600px; width:600px; width:expression(document.body.client

使用CSS和Javascript控制网页图片宽度的大小

JorWang の 小喇叭:『 最近比較忙啊,暫時不更新了,大家玩得開心點哦!O(∩_∩)O~ 』 刚刚看到两个控制网页图片宽度的大小的方法,觉得很好很方便,特此分享给大家. 第一个方法是使用CSS来实现控制大小: img{ border:0; margin:0; padding:0; max-width:590px; width:expression(this.width>590?"590px":this.width); max-height:590px; height:exp

CSS控制图片大小-适应宽度_经验交流

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px;} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的.     那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看:  复制代码 代码如下: img{width:expression(this.width>500?"500px":t

如何用CSS控制图片自适应大小？

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了.我们看下面的代码:  代码如下 复制代码 div img {  max-width:600px;  width:600px;  width:expression(document.body.clientWidth>600?"600px&qu