久久精品国产亚洲AV成人婷婷_性色av不卡无码一区二区_人妻无码久久影视_久久精品国产免费一卡二卡

在網(wǎng)頁(yè)設(shè)計(jì)中定義圖片大小

  • 2019-09-24 11:00:53
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://mnamateurbaseball.com

制作網(wǎng)頁(yè)時(shí),CSS設(shè)置圖片大小只需設(shè)置圖片的寬度屬性width和高度屬性height即可,設(shè)置方法如下:

img  {     width:數(shù)值;     height:數(shù)值;}

其中,寬度屬性width和高度屬性height的值既可以是絕對(duì)數(shù)值,如200px,也可以是相對(duì)數(shù)值,如50%,當(dāng)width設(shè)置為50%時(shí),圖片的寬度將調(diào)整為父元素寬度的一半。

【示例1】啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為test.html,在<body>標(biāo)簽中輸入以下內(nèi)容:

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

在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式:

img{    width:50%;  /*相對(duì)寬度*/}

因?yàn)樵?a href="http://mnamateurbaseball.com" target="_self" title="昆明網(wǎng)頁(yè)制作">制作網(wǎng)頁(yè)時(shí)設(shè)置的是相對(duì)大小,這里是相對(duì)于body元素的寬度,因此圖片的大小總是保持相對(duì)于body的50%,當(dāng)改變?yōu)g覽器大小時(shí),圖片的大小也相對(duì)變化,但總是保持在50%的水平。

這里需要指出的是,在此例中僅僅設(shè)置了圖片的width屬性,而沒(méi)有設(shè)置height屬性,但是圖片的大小會(huì)等縱橫比例縮放,如果只設(shè)定了height屬性而沒(méi)有設(shè)置width屬性道理也是一樣的。

【示例2】在設(shè)置圖片大小時(shí),當(dāng)同時(shí)設(shè)定了width和height屬性時(shí),圖片將不等比縮放。啟動(dòng)Dreamweaver,新建一個(gè)網(wǎng)頁(yè),保存為test.html,在<body>標(biāo)簽內(nèi)輸入如下結(jié)構(gòu):

<img src="images/2.jpg">在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表。

img{   width: 60%;     /*相對(duì)寬度*/   height: 200px;   /*絕對(duì)寬度*/}

其顯示結(jié)果可以看到圖片的高度固定為280px,當(dāng)瀏覽器窗口變化時(shí),高度并沒(méi)有隨著圖片寬度的變化而變化,圖片發(fā)生了不等比的縮放。

【拓展】在圖片縮放中,等比例地修改圖片的寬度值和高度值,可以保證圖片不變形。其實(shí)在網(wǎng)頁(yè)設(shè)計(jì)時(shí)還有一個(gè)參數(shù)max-width,通過(guò)設(shè)置它可以保證圖片不變形。這個(gè)參數(shù)就是用來(lái)設(shè)置圖片的最大值,如果圖片的尺寸超過(guò)這個(gè)圖片的最大值(max-width),那么就按設(shè)置的max-width值顯示寬度,而圖片的高度將做同比例變化。但是,如果圖片的尺寸小于最大寬度值,那么圖片是按原尺寸來(lái)顯示,不做縮放。這個(gè)參數(shù)的用法如下:

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

}

其中,max-width屬性的值一般為數(shù)值類型,只要將其定義為一個(gè)固定的數(shù)值就可以控制圖片的最大寬度。例如定義max-width:400px,那么就定義了圖片的最大寬度為400px,就算超出這個(gè)寬度值,也只會(huì)顯示400px大小;如果圖片的寬度值小于這個(gè)值,則會(huì)按圖片的原大小顯示。

當(dāng)前文章標(biāo)題:在網(wǎng)頁(yè)設(shè)計(jì)中定義圖片大小

當(dāng)前URL:http://mnamateurbaseball.com/news/wzzz/3102.html

上一篇:設(shè)置圖片樣式

下一篇:定義圖片的橫縱向?qū)R

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))