用CSS控制图片自适应大小

2016-02-19 13:36 9 1 收藏

下面图老师小编要向大家介绍下用CSS控制图片自适应大小,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!

【 tulaoshi.com - Web开发 】

图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制。

代码:
 
.img {
max-width:600px;
width:600px;
width:e­xpression(document.body.clientWidth600?"600px":"auto");
overflow:hidden;
}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
◎ width:600px; 在所有浏览器中图片的大小为600px;
◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1604742.html

延伸阅读
标签: Web开发
以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 关键在于:max-width:780px;以及下面那行。 固定像素适应: 以下是引用片段: style type="text/css" !-- body { font-size: 12px; text-align: center; margin: 0...
标签: Web开发
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢...
标签: Web开发
!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" xml:lang="en" lang="en" head title/title meta http-equiv="Content-Type" content="text/html; charset=gb2312" / style type="text/css" !-- *{padding:0px;margin:0...
标签: Web开发
有时候我们需要一个链接看上去像按钮,所以就需要用到block属性,如果要几个按钮并排或者需要和其他文字混排的时候,inline-block就可以很好的解决这个问题。 只是不是所有人都响应了Mozilla的号召把Firefox升级到了3.0。遗憾的是,Firefox2不支持这个属性。网上查了一下,似乎有很多种建议方案,但是只有一个叫-moz-inline-stack的属...
自适应高度的问题,采用 Div + CSS 进行三列或二列布局时,事先不知道具体高度,只能根据内容的增减自适应高度,要使两列(或三列)的高度相同,用 Table 很容易实现,但采用 Div + CSS 就显得比较麻烦了。按照一般的做法,大都采用背景图填充或 JS 脚本的方法使高度相同,但这些都不是最好的办法,我认为… 下面介绍采用“隐藏容器溢出”和“...

经验教程

28

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部