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; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

时间： 2024-02-19 19:48:09

CSS控制图片代码:让网页图片自适应大小的相关文章

CSS控制Table内外边框、颜色、大小示例

在默认的情况下,我们的CSS将Table的边框清除掉了,下面与大家分享下CSS控制Table内外边框.颜色.大小的样式,想学习的朋友可以参考下其实按照常理来说,现在的网站应该早已经抛弃什么表格了,现在肯定是DIV+CSS当道嘛!不过客户的网站在添加内容的时候始终不满意那些边框效果:要么没有,要么很粗.看得出来,这位客户是位完美主义者. 在默认的情况下,我们的CSS将Table的边框清除掉了,是没有的,看到的效果是这样的. 无边框Table 为了给,表格加一个边框,我在CSS里面写了这样一句

JS网页特效代码:切割网页图片特殊效果

JS效果之图片切割 DEMO1(随机出现): http://cnwander.com/demo/puzzle_effect/机器配置好的可以将图片切得更细一点 (变量xNum,yNum)DEMO1(规则运动): http://cnwander.com/demo/puzzle_effect/index2.html测试:IE6.IE7.FF3.014原文:http://cnwander.com/blog/?p=13 突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有

优化JS和CSS更快地下载网页图片

文章简介:我关注JS和CSS的重点也是如何能够更快地下载图片.图片是用户可以直观看到的.他们并不会关注JS和CSS.确实,JS和CSS会影响图片内容的展示,尤其是会影响图片的展示方式(比如图片轮播,CSS背景图和媒体查询).但是我认为JS和CSS只是展示图片的方式.在页面加载的过程我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说

网页浮动图片代码

<div id="flash"> <script type="text/javascript"> var widths = 865; /*显示高度,自行调整*/ var heights = 255; /*显示宽度,自行调整*/ var counts = 5; img1 = new Image(); img1.src = 'images/flash_07.jpg'; img2 = new Image(); img2.src = 'images/

网页开发-网页图片轮播图片显示问题

问题描述网页图片轮播图片显示问题我要实现几张图片轮播:功能正常实现了,可是这个图片怎么显示地这么奇怪:半天找不出原因!求大神开发-网页图片轮播图片显示问题-网页图片轮播代码"> 这个是两张图片...都只显示了各自的一半:我想要的是一整张一整张的显示: 解决方案官网的正常没有,正常就是你使用有问题,或者自己导入的css重写了插件的css导致的jquery焦点图代码解决方案二: css 的问题.这类的问题还是调试吧. 解决方案三: 你这是用插件的吧.原因应该是插件里面的css和你自

网页图片的使用技巧

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断淘宝客云主机技术大厅图片已经成为网页设计中不可或缺的元素,但是对于普通网站来讲,图片也成为页面加载的一大负担.因此,一个好的网站要求站长合理的使用图片,灵活运用网页图片处理技巧和网页图片设计规则,让图片在传达信息和美化界面的同时又不会给网站的浏览速度带来影响. 在网页中使用用图片,先要处理要用到的图片,再利用网页制作工具在需要的位置插入相应的图片,然后设置其宽度

c#-C#获取网页图片地址问题

问题描述 C#获取网页图片地址问题现在我可以用C#获取网页图片,但是有些网页图片是用js载入的.用正则表达式更改获取不了该类的图片地址,请问哪位大虾知道哈....

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

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

CSS控制图片使它自适应大小代码

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 下面就为你提供两种方法,我个人推荐第一种方法方法一 CSS控制图片大小代码 <style type="text/css"> img { border:0; margin:0; padding:0; max-width:200px; width:expression(this.width>200?"200px