网站设计前端设计师应该如何定义图像大小？

当前位置：

发布时间：2018-09-20

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

网站设计离不开图片，一个网站在制作时离开了图片的存在，那这个网站是非常难看的。如何在网页前端排版时合理插入图像？网站制作公司前端设计师认为首先我们要了解如何定义图像大小。定义图片大小CSS设置图片大小只需设置图片的宽度属性width和高度属性height即可，设置方法如下：

img {
width:数值;
height:数值;
}其中，宽度属性width和高度属性height的值既可以是绝对数值，如200px，也可以是相对数值，如50%，当width设置为50%时，图片的宽度将调整为父元素宽度的一半。
【示例1】启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签中输入以下内容：
<imgsrc="images/1.jpg">
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式：
img{
width:50%;/*相对宽度*/}

其显示效果如图5.30所示。因为设置的是相对大小，这里是相对于body元素的宽度，因此图片的大小总是保持相对于body的50%，当改变浏览器大小时，图片的大小也相对变化，但总是保持在50%的水平。

图片的宽度相对变化这里需要指出的是，在此例中仅仅设置了图片的width属性，而没有设置height属性，但是图片的大小会等纵横比例缩放，如果只设定了height属性而没有设置width属性道理也是一样的。
【示例2】在设置图片大小时，当同时设定了width和height属性时，图片将不等比缩放。启动Dreamweaver，新建一个网页，保存为test.html，在<body>标签内输入如下结构：
<imgsrc="images/2.jpg">
在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表。

img{width:60%;/*相对宽度*/
height:200px;/*绝对宽度*/
}
其显示结果如图5.31所示。可以看到图片的高度固定为280px，当浏览器窗口变化时，高度并没有随着图片宽度的变化而变化，图片发生了不等比的缩放。

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

img{
max-width:最大宽度值;
}
其中，max-width属性的值一般为数值类型，只要将其定义为一个固定的数值就可以控制图片的最大宽度。例如定义max-width:400px，那么就定义了图片的最大宽度为400px，就算超出这个宽度值，也只会显示400px大小；如果图片的宽度值小于这个值，则会按图片的原大小显示。
网站前端设计如何定义图片的横向对齐
图片的横向对齐和文字的横向对齐方法基本相同，分为左、中、右3种。不同的是图片的对齐不能直接通过设置图片的text-align属性来定义，而是需要通过设置其父元素的该属性，使其继承text-align属性来实现。
【示例】新建一个网页，保存为test.html，在<body>标签中输入以下代码，并分别设置align属性调整对齐方式。

设置图片的水平对齐。
定义图片的纵向对齐图片的纵向对齐主要体现在和文字的搭配使用中，当图片的高度和宽度与文字部分不一致时，可以通过CSS中的vertical-align属性来设置纵向对齐。
{vertical-align:参数}

【示例1】新建一个网页，保存为test.html，在<head>标签内添加<styletype="text/css">标签，定义一个内部样式表，然后输入下面样式：

然后在<body>标签中输入一行段落文本，并应用上面的类样式。<pclass="baseline">纵向对baseline<imgsrc="images/1.jpg"style="vertical-align:baseline"/>
<pclass="sub">纵向对齐sub：<imgsrc="images/1.jpg"style="vertical-align:sub"/>
<pclass="super">纵向对齐super：<imgsrc="images/1.jpg"style="vertical-align:super"/>
<pclass="top">纵向对齐top：<imgsrc="images/1.jpg"style="vertical-align:top"/>
<pclass="middle">纵向对齐middle：<imgsrc="images/1.jpg"style="vertical-align:middle"/>
<pclass="bottom">纵向对齐bottom：<imgsrc="images/1.jpg"style="vertical-align:bottom"/>>在浏览器中预览，则显示效果如图5.33所示。