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

css|控制|网页|自适应

  图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

  我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,已经可以满足你的需要了。我们看下面的代码:

div img {
 max-width:600px;
 width:600px;
 width:expression(document.body.clientWidth>600?"600px":"auto");
 overflow:hidden;
}

 ◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

 ◎ width:600px; 在所有浏览器中图片的大小为600px;

 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。

 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

时间: 2025-01-02 17:31:04

用CSS如何控制网页中图片自适应大小?的相关文章

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

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

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

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

CSS控制网页中文本的技巧

css|技巧|控制|网页|中文 控制文字的样式 控制文字的样式包括文字大小写.文字修饰两个部分. 1.文字大小写 文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写. 基本格式如下: text-transform: 参数 参数取值范围: ·uppercase:所有文字大写显示 ·lowercase:所有文字小写显示 ·capitalize:每个单词的头字母大写显示 ·none:不继承母体的文字变形参数 注意:继承是指HTML的标识符对

CSS实现的网页中文字排版的几种方式

CSS实现的网页中文字排版的几种方式!如果用得上可以直接用现成的了! 1.文字倒排(逆时针转90度)<br><br><span style="font-family:@宋体;color:red">尽人事 顺天命</span><br><br>2.文字正写竖排,中文竖排,从右往左读<br><br><div style="layout-flow: vertical-ideograp

网页中图片和文字相分离的方法

网页 快速保存网页中所有图片的方法 首先打开有图片的网页,完全打开后,在地址栏输入 javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+

背景图片自适应大小不重复,充满容器

问题描述 背景图片自适应大小不重复,充满容器 在网页设计的时候,我给div容器设置背景图片,怎么设置,能使背景图片不重复,自适应容器大小充满. 在容器中插入图片,能达到预期效果,但背景图的话,不知道怎么设置背景图属性. 解决方案 加上background-size:100% 100%; 解决方案二: BODY {background-image: URL(photo/picture1.jpg); background-position: center; background-repeat: no

纯js实现div内图片自适应大小(已测试,兼容火狐)_javascript技巧

这代码实现的功能就是平常我们遇到的一个div里面包含img的时候,在img图片大小未知,div大小未知的情况下,让图片自适应大小,对于图片本身小于div容器大小时,不作处理.因为如果拉伸,图片可能就失真了. 废话不多说,直接上代码,已测试,兼容火狐,谷歌,IE6,IE7/8 以下是js代码: 复制代码 代码如下: <script type="text/javascript" language="javascript"> window.onload=fun

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

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

用CSS跨浏览器管理网页中图片的透明度

css|浏览器|透明|网页 在网页制作过程中,我们会想用CSS来管理图片的透明度,但是用CSS来管理图片要根据不同的浏览器来进行设置.本教程只是冰山一角,目的提醒大家当使用DIV+CSS制作网页时最终效果最少应该用两种不同浏览器来进行测试. 这个教程我们就针对目前使用最多的浏览器来进行讲解. Firefox: 在Firefox中样式表CSS用-moz-opacity: xx来表示透明度的,xx是一个0到1之间的数代码如下: <img style="-moz-opacity:0.5"