CSS中如何定义一个层,比方说是100X100的大小 ,如果放个120X120的图片不会把层撑大,而自动缩小图片呢?

html-css013

CSS中如何定义一个层,比方说是100X100的大小 ,如果放个120X120的图片不会把层撑大,而自动缩小图片呢?,第1张

如果div的高宽比例与图片的高宽比例一样的话,那么你可以给图片设定高度和宽度100%;

但是一般很难碰到图片比例都是一样的,所以这就需要用到js脚本了

<div id=article><img height="800" alt="" width="1280" src="/down/js/images/12498880470.jpg" /></div>

<script type="text/javascript" >

//缩放图片到合适大小

function ResizeImages()

{

var myimg,oldwidth,oldheight

var maxwidth=550

var maxheight=880

var imgs = document.getElementById('article').getElementsByTagName('img') //如果你定义的id不是article,请修改此处

for(i=0i<imgs.lengthi++){

myimg = imgs[i]

if(myimg.width >myimg.height)

{

if(myimg.width >maxwidth)

{

oldwidth = myimg.width

myimg.height = myimg.height * (maxwidth/oldwidth)

myimg.width = maxwidth

}

}else{

if(myimg.height >maxheight)

{

oldheight = myimg.height

myimg.width = myimg.width * (maxheight/oldheight)

myimg.height = maxheight

}

}

}

}

//缩放图片到合适大小

ResizeImages()

</script>

你把上面的代码复制过去看看就明白了,原图尺寸是很大的,这里把图片等比例缩小了

px和pt都是绝对单位,%是相对打下,比如<table width=50%>表示宽度为所在容器的一半,如果直接在<body>里面,这个表格的宽度就是窗口大小的一半,而<table width=400pt>这个表格的宽度固定为400像素。

1、用颜色名表示

如:white、red、greenyellow、gold等。

2、用十六进制的颜色值表示(红、绿、蓝)

#FF0000或者#F00

3、用rgb(r,g,b)函数表示

如:rgb(255,255,0)

4、用hsl(Hue,Saturation,Lightness)函数表示(色调、饱和度、亮度)

如:hsl(120,100%,100%),色调0代表红色,120代表绿色,240代表

蓝色

5、用rgba(r,g,b,a)函数表示

其中a表示的是改颜色的透明度,取值范围是0~1,其中0代表完全透明。

6、用hsla(Hue,Saturation,Lightness,alpha)函数表示

色调、饱和度、亮度、透明度