当前位置:文档之家› css控制图片大小的方法

css控制图片大小的方法

css控制图片大小的方法
css控制图片大小的方法

网页制作技巧实例解决:用CSS控制图片自适应大小

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

对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?

可以通过按比例缩小或者放大到某尺寸(自己指定),来保持图片不变形走样的完全显示。解决方案:

一、对于标准浏览器(如Firefox),或者最新都IE7浏览器,直接使用max-

width,max-height;或者min-width,min-height的CSS属性即可。如:

我们想到了一个比较简单的解决方法,虽然不是非常的完美,如果您的要求不是非常高,

已经可以满足你的需要了。我们看下面的代码:

[css]view plaincopyprint?

1.img{

2. max-width:100px;

3. max-height:100px;

4. overflow:hidden;

5.}

二、对于IE6及其以下版本的浏览器,则可以利用其支持的expression属性,在css code 中嵌入javascript code来实现图片的缩放:

[css]view plaincopyprint?

1.img{

2. width:expression(this.width>150?"150px":this.width);

3. height:expression(this.height>150?" 150px":this.height);

4.}

三、完美解决方案

[css]view plaincopyprint?

1.img{

2. border:0;

3. margin:0;

4. padding:0;

5. max-width:150px;

6. width:expression(this.width>150?"150px":this.width);

7. max-height:150px;

8. height:expression(this.height>150?" 150px":this.height);

9.}

相关主题
文本预览
相关文档 最新文档