當前位置：

發(fā)布時間：2018-09-20
文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊瀏覽量：次

網(wǎng)站設(shè)計離不開圖片，一個網(wǎng)站在制作時離開了圖片的存在，那這個網(wǎng)站是非常難看的。如何在網(wǎng)頁前端排版時合理插入圖像？網(wǎng)站制作公司前端設(shè)計師認為首先我們要了解如何定義圖像大小。定義圖片大小CSS設(shè)置圖片大小只需設(shè)置圖片的寬度屬性width和高度屬性height即可，設(shè)置方法如下：

img {
width:數(shù)值;
height:數(shù)值;
}其中，寬度屬性width和高度屬性height的值既可以是絕對數(shù)值，如200px，也可以是相對數(shù)值，如50%，當width設(shè)置為50%時，圖片的寬度將調(diào)整為父元素寬度的一半。
【示例1】啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，在<body>標簽中輸入以下內(nèi)容：
<imgsrc="images/1.jpg">
在<head>標簽內(nèi)添加<styletype="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：
img{
width:50%;/*相對寬度*/}

其顯示效果如圖5.30所示。因為設(shè)置的是相對大小，這里是相對于body元素的寬度，因此圖片的大小總是保持相對于body的50%，當改變?yōu)g覽器大小時，圖片的大小也相對變化，但總是保持在50%的水平。

圖片的寬度相對變化這里需要指出的是，在此例中僅僅設(shè)置了圖片的width屬性，而沒有設(shè)置height屬性，但是圖片的大小會等縱橫比例縮放，如果只設(shè)定了height屬性而沒有設(shè)置width屬性道理也是一樣的。
【示例2】在設(shè)置圖片大小時，當同時設(shè)定了width和height屬性時，圖片將不等比縮放。啟動Dreamweaver，新建一個網(wǎng)頁，保存為test.html，在<body>標簽內(nèi)輸入如下結(jié)構(gòu)：
<imgsrc="images/2.jpg">
在<head>標簽內(nèi)添加<styletype="text/css">標簽，定義一個內(nèi)部樣式表。

img{width:60%;/*相對寬度*/
height:200px;/*絕對寬度*/
}
其顯示結(jié)果如圖5.31所示?？梢钥吹綀D片的高度固定為280px，當瀏覽器窗口變化時，高度并沒有隨著圖片寬度的變化而變化，圖片發(fā)生了不等比的縮放。

不等比縮放【拓展】在圖片縮放中，等比例地修改圖片的寬度值和高度值，可以保證圖片不變形。其實在CSS中還有一個參數(shù)max-width，通過設(shè)置它可以保證圖片不變形。這個參數(shù)就是用來設(shè)置圖片的最大值，如果圖片的尺寸超過這個圖片的最大值（max-width），那么就按設(shè)置的max-width值顯示寬度，而圖片的高度將做同比例變化。但是，如果圖片的尺寸小于最大寬度值，那么圖片是按原尺寸來顯示，不做縮放。這個參數(shù)的用法如下：

img{
max-width:最大寬度值;
}
其中，max-width屬性的值一般為數(shù)值類型，只要將其定義為一個固定的數(shù)值就可以控制圖片的最大寬度。例如定義max-width:400px，那么就定義了圖片的最大寬度為400px，就算超出這個寬度值，也只會顯示400px大??；如果圖片的寬度值小于這個值，則會按圖片的原大小顯示。
網(wǎng)站前端設(shè)計如何定義圖片的橫向?qū)R
圖片的橫向?qū)R和文字的橫向?qū)R方法基本相同，分為左、中、右3種。不同的是圖片的對齊不能直接通過設(shè)置圖片的text-align屬性來定義，而是需要通過設(shè)置其父元素的該屬性，使其繼承text-align屬性來實現(xiàn)。
【示例】新建一個網(wǎng)頁，保存為test.html，在<body>標簽中輸入以下代碼，并分別設(shè)置align屬性調(diào)整對齊方式。

設(shè)置圖片的水平對齊。
定義圖片的縱向?qū)R圖片的縱向?qū)R主要體現(xiàn)在和文字的搭配使用中，當圖片的高度和寬度與文字部分不一致時，可以通過CSS中的vertical-align屬性來設(shè)置縱向?qū)R。
{vertical-align:參數(shù)}

【示例1】新建一個網(wǎng)頁，保存為test.html，在<head>標簽內(nèi)添加<styletype="text/css">標簽，定義一個內(nèi)部樣式表，然后輸入下面樣式：

然后在<body>標簽中輸入一行段落文本，并應(yīng)用上面的類樣式。<pclass="baseline">縱向?qū)aseline<imgsrc="images/1.jpg"style="vertical-align:baseline"/>
<pclass="sub">縱向?qū)Rsub：<imgsrc="images/1.jpg"style="vertical-align:sub"/>
<pclass="super">縱向?qū)Rsuper：<imgsrc="images/1.jpg"style="vertical-align:super"/>
<pclass="top">縱向?qū)Rtop：<imgsrc="images/1.jpg"style="vertical-align:top"/>
<pclass="middle">縱向?qū)Rmiddle：<imgsrc="images/1.jpg"style="vertical-align:middle"/>
<pclass="bottom">縱向?qū)Rbottom：<imgsrc="images/1.jpg"style="vertical-align:bottom"/>>在瀏覽器中預(yù)覽，則顯示效果如圖5.33所示。

關(guān)于網(wǎng)站設(shè)計，前端布局是如何處理圖像大小以及怎樣對齊圖像的經(jīng)驗分享本文就寫到這里。深圳網(wǎng)站制作博納網(wǎng)絡(luò)編輯整理。

當前文章鏈接：/construction/jzhyzx/1390.html

上一篇：網(wǎng)頁設(shè)計時圖片如何處理才能體現(xiàn)前端界面效果下一篇：網(wǎng)站設(shè)計前端工程師分享“圖像定義大小”實操案例

返回列表

如果您覺得案例還不錯請幫忙分享：

[聲明]本網(wǎng)轉(zhuǎn)載網(wǎng)絡(luò)媒體稿件是為了傳播更多的信息，此類稿件不代表本網(wǎng)觀點，本網(wǎng)不承擔此類稿件侵權(quán)行為的連帶責任。故此，如果您發(fā)現(xiàn)本網(wǎng)站的內(nèi)容侵犯了您的版權(quán)，請您的相關(guān)內(nèi)容發(fā)至此郵箱【qin@198bona.com 】，我們在確認后，會立即刪除，保證您的版權(quán)。

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當前位置：

發(fā)布時間：2018-09-20
文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊瀏覽量：次

如果您覺得案例還不錯請幫忙分享：

相關(guān)案例推薦

科顏美整形醫(yī)院

纖纖瘦身行業(yè)網(wǎng)站建設(shè)作案例

貝特萊衣柜

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索

夏目彩春av在线看,夏目彩春av在线看,亚洲国产成人精品日韩18,搡老岳熟女国产熟妇视频,欧美国产亚洲欧美国产,99久久蜜人人爽亚洲精品美女,3p少妇亚洲一区二区三区欧美,美女天天干美女天天操,男女啪啪啪噜噜噜免费观看网站

深圳網(wǎng)站建設(shè)—APP開發(fā)—網(wǎng)站制作—小程序開發(fā)_博納網(wǎng)絡(luò)公司

當前位置：

發(fā)布時間：2018-09-20 文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊 瀏覽量：次

相關(guān)案例推薦

科顏美整形醫(yī)院

纖纖瘦身行業(yè)網(wǎng)站建設(shè)作案例

貝特萊衣柜

資訊分類

最新發(fā)布

相關(guān)資訊

熱門搜索

發(fā)布時間：2018-09-20
文章編輯：網(wǎng)站建設(shè) 文章來源：建站行業(yè)資訊瀏覽量：次