css中如何调整插入背景图片的大小

html-css011

css中如何调整插入背景图片的大小,第1张

CSS2.1 之前是不能设置背景图大小的,CSS3就可以通过background-size来设定图片大小,可以是像素或者是百分比。

例如background-size:100px 200px表示把背景图片大小调整为100x200px。

要把图像应用成为背景,要使用 background-image这一 属性。当background-image 属性默认值是 none的时候,这表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

不知道家有没有遇到过这样的情况:在CSS控制图片大小时,如果把图片的宽度写死,比如 img{width:500px} ,固然,如果图片宽度大于500px可以很好的控制它不让它过大,但如果图片宽度小于500px,比如说只有100px时,刚才的写法会把这张图扩大5倍显示,显然,这不是我们想看到的。 那么,CSS如何可以区分对待这些图片设置大小呢?很简单,请看: 复制代码 代码如下:img{width:expression(this.width>500?"500px":this.width+"px")} 只要在CSS运用这段代码,就可以分别控制大图片与小图片。它的意思就是,如果图片宽度大于500px,那么图片就以500px的大小显示,如果小于的话,那么图片就按照原有尺寸显示!怎么样,是不是确实很简单? 弊端:增加客户端的负荷,一般用js实现的比较多。

使用CSS max-width和max-height实现图片自动等比例缩小

很简单我们要使用到max-width和max-height,这样即可设置对象图片最大宽度和最大高度,这样图片就会等比例缩放图片,然图片相对不变形清晰。

使用max-width:300px或max-height:100px,即可解决图片比例缩小。但这样存在一个问题,如果按照宽度缩放,但图片过高会超出溢出盒子,这个时候需要对父级使用overflow:hidden隐藏超出图片内容。但是使用max-width或max-height,IE6不支持,我们需要设置个width:expression(this.width >300 ? "300px" : this.width)或者height:e­xpression(this.height>100?"100px":this.height)。

解决IE6支持max-height

div css解决IE6支持max-width

一般情况下只需要设置好宽度限制,比如这里只设置最大宽度为300px(max-width:300px),然后对父级使用overflow:hidden隐藏溢出图片,同时为了兼容IE6我们设置个width:expression(this.width >300 ? "300px" : this.width)解决即可。

1、具体解决DIV+CSS实例代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>图片缩小不变形实例 www.divcss5.com</title>

<style>

.divcss5{ border:1px solid #000width:300pxheight:100pxoverflow:hidden}

.divcss5 img{max-width:300px_width:expression(this.width >300 ? "300px" : this.width)}

</style>

</head>

<body>

<div class="divcss5">