• <cite id="ls72a"></cite>

  • <rp id="ls72a"><nav id="ls72a"></nav></rp>
    <b id="ls72a"></b>

    在网页设计中定义图片大小

    • 2019-09-24 11:00:53
    • 阅读次数:
    • 作者:盈岚科技小编
    • 来源:http://www.0737dz.com

    制作网页时,CSS设置图片大小只需设置图片的宽度属性width和高度属性height即可,设置方法如下:

    img  {     width:数值;     height:数值;}

    其中,宽度属性width和高度属性height的值既可以是绝对数值,如200px,也可以是相对数值,如50%,当width设置为50%时,图片的宽度将调整为父元素宽度的一半。

    【示例1】启动Dreamweaver,新建一个网页,保存为test.html,在<body>标签中输入以下内容:

    <img src="images/1.jpg">

    在<head>标签内添加<style type="text/css">标签,定义一个内部样式表,然后输入下面样式:

    img{    width:50%;  /*相对宽度*/}

    因为在制作网页时设置的是相对大小,这里是相对于body元素的宽度,因此图片的大小总是保持相对于body的50%,当改变浏览器大小时,图片的大小也相对变化,但总是保持在50%的水平。

    这里需要指出的是,在此例中仅仅设置了图片的width属性,而没有设置height属性,但是图片的大小会等纵横比例缩放,如果只设定了height属性而没有设置width属性道理也是一样的。

    【示例2】在设置图片大小时,当同时设定了width和height属性时,图片将不等比缩放。启动Dreamweaver,新建一个网页,保存为test.html,在<body>标签内输入如下结构:

    <img src="images/2.jpg">在<head>标签内添加<style type="text/css">标签,定义一个内部样式表。

    img{   width: 60%;     /*相对宽度*/   height: 200px;   /*绝对宽度*/}

    其显示结果可以看到图片的高度固定为280px,当浏览器窗口变化时,高度并没有随着图片宽度的变化而变化,图片发生了不等比的缩放。

    【拓展】在图片缩放中,等比例地修改图片的宽度值和高度值,可以保证图片不变形。其实在网页设计时还有一个参数max-width,通过设置它可以保证图片不变形。这个参数就是用来设置图片的最大值,如果图片的尺寸超过这个图片的最大值(max-width),那么就按设置的max-width值显示宽度,而图片的高度将做同比例变化。但是,如果图片的尺寸小于最大宽度值,那么图片是按原尺寸来显示,不做缩放。这个参数的用法如下:

    img{   max-width:最大宽度值;

    }

    其中,max-width属性的值一般为数值类型,只要将其定义为一个固定的数值就可以控制图片的最大宽度。例如定义max-width:400px,那么就定义了图片的最大宽度为400px,就算超出这个宽度值,也只会显示400px大小;如果图片的宽度值小于这个值,则会按图片的原大小显示。

    当前文章标题:在网页设计中定义图片大小

    当前URL:http://www.0737dz.com/news/wzzz/3102.html

    上一篇:设置图片样式

    下一篇:定义图片的横纵向对齐

    网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)
    日本三级香港三级人妇99,亚洲欧美中文日韩综合图区,欧美黄网站色视频免费,哈啊往里噗嗤好深bl纯肉np 网站地图