言

在響應(yīng)式布局逐漸成為主流的今天，網(wǎng)頁(yè)或者app的流式布局已經(jīng)不算是一個(gè)新鮮的詞匯了。今天我要講的一個(gè)內(nèi)容也是跟頁(yè)面流式布局有關(guān)，如何讓你的網(wǎng)頁(yè)實(shí)現(xiàn)完美的縮放？

網(wǎng)頁(yè)布局

我們可以很快速的寫(xiě)出一個(gè)響應(yīng)式布局的頁(yè)面，首先看一下效果圖。

網(wǎng)頁(yè)布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過(guò)以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行縮放。

問(wèn)題

But，你以為這就是我們想要的結(jié)果嗎？

當(dāng)然不是！在改變?yōu)g覽器窗口大小時(shí)，我們發(fā)現(xiàn)雖然div的寬度是進(jìn)行了縮放，但是高度卻沒(méi)變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結(jié)果。

我們需要達(dá)到的效果是在改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行等比例的縮放。

實(shí)現(xiàn)辦法

首先，可以使用Javascript代碼去實(shí)現(xiàn)，這是沒(méi)有問(wèn)題的。但是綁定Javascript的onresize事件，在拖拽時(shí)可能會(huì)出卡頓現(xiàn)象，體驗(yàn)不是很好。

接下來(lái)我們通過(guò)CSS來(lái)實(shí)現(xiàn)以上的效果。

使用的核心屬性是我們平時(shí)并不太注意的padding-bottom。

padding-bottom有一個(gè)很容易讓人忽略的特性是，當(dāng)取值為百分比形式時(shí)，其百分比的基數(shù)是父元素的寬度，而不是高度。

因此我們可以在不用給父元素設(shè)置高度的時(shí)候，就可以通過(guò)padding-bottom屬性確定當(dāng)前元素的高度。我們的做法如下。

1. 將元素的height屬性設(shè)為0，通過(guò)padding-bottom屬性確定元素高度。

2. 設(shè)置合理的padding-bottom值，例如上述的例子中，在寬度為21%時(shí)，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%

修改后的CSS代碼如下。

修改后的CSS

修改后，我們?cè)俅握{(diào)整瀏覽器窗口的大小，就會(huì)發(fā)現(xiàn)div是等比例的進(jìn)行縮放，完美達(dá)到了我們的要求。

修改后等比例縮放

疑問(wèn)

在這里，可能會(huì)有人有疑問(wèn)如果設(shè)置overflow:hidden;那么里面的文字會(huì)不會(huì)因?yàn)槌^(guò)height，就會(huì)被隱藏了？

答案是不會(huì)的，根據(jù)CSS2.1的規(guī)范，overflow只會(huì)對(duì)處于padding外面的內(nèi)容生效，即只有超出了 padding區(qū)域的內(nèi)容才會(huì)被overflow屬性隱藏掉。而在設(shè)置padding-bottom后，實(shí)際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會(huì)生效。

總結(jié)

今天這篇文章主要講解了利用CSS完成頁(yè)面等比例縮放的最簡(jiǎn)單方式，你學(xué)會(huì)了嗎？

言

在響應(yīng)式布局逐漸成為主流的今天，網(wǎng)頁(yè)或者app的流式布局已經(jīng)不算是一個(gè)新鮮的詞匯了。今天我要講的一個(gè)內(nèi)容也是跟頁(yè)面流式布局有關(guān)，如何讓你的網(wǎng)頁(yè)實(shí)現(xiàn)完美的縮放？

網(wǎng)頁(yè)布局

我們可以很快速的寫(xiě)出一個(gè)響應(yīng)式布局的頁(yè)面，首先看一下效果圖。

網(wǎng)頁(yè)布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過(guò)以上代碼，完成上述的流式布局后，在我們改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行縮放。

問(wèn)題

But，你以為這就是我們想要的結(jié)果嗎？

當(dāng)然不是！在改變?yōu)g覽器窗口大小時(shí)，我們發(fā)現(xiàn)雖然div的寬度是進(jìn)行了縮放，但是高度卻沒(méi)變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

從上圖中可以很容易看出，縮放后的div寬高比比之前小很多，這并不是我們想要的結(jié)果。

我們需要達(dá)到的效果是在改變?yōu)g覽器窗口大小時(shí)，div也會(huì)隨之進(jìn)行等比例的縮放。

實(shí)現(xiàn)辦法

首先，可以使用Javascript代碼去實(shí)現(xiàn)，這是沒(méi)有問(wèn)題的。但是綁定Javascript的onresize事件，在拖拽時(shí)可能會(huì)出卡頓現(xiàn)象，體驗(yàn)不是很好。

接下來(lái)我們通過(guò)CSS來(lái)實(shí)現(xiàn)以上的效果。

使用的核心屬性是我們平時(shí)并不太注意的padding-bottom。

padding-bottom有一個(gè)很容易讓人忽略的特性是，當(dāng)取值為百分比形式時(shí)，其百分比的基數(shù)是父元素的寬度，而不是高度。

因此我們可以在不用給父元素設(shè)置高度的時(shí)候，就可以通過(guò)padding-bottom屬性確定當(dāng)前元素的高度。我們的做法如下。

1. 將元素的height屬性設(shè)為0，通過(guò)padding-bottom屬性確定元素高度。

2. 設(shè)置合理的padding-bottom值，例如上述的例子中，在寬度為21%時(shí)，如果需要高度是寬度的1.62倍，我們可以將padding-bottom取值為34%

修改后的CSS代碼如下。

修改后的CSS

修改后，我們?cè)俅握{(diào)整瀏覽器窗口的大小，就會(huì)發(fā)現(xiàn)div是等比例的進(jìn)行縮放，完美達(dá)到了我們的要求。

修改后等比例縮放

疑問(wèn)

在這里，可能會(huì)有人有疑問(wèn)如果設(shè)置overflow:hidden;那么里面的文字會(huì)不會(huì)因?yàn)槌^(guò)height，就會(huì)被隱藏了？

答案是不會(huì)的，根據(jù)CSS2.1的規(guī)范，overflow只會(huì)對(duì)處于padding外面的內(nèi)容生效，即只有超出了 padding區(qū)域的內(nèi)容才會(huì)被overflow屬性隱藏掉。而在設(shè)置padding-bottom后，實(shí)際已經(jīng)決定了元素的height屬性，因此overflow:hidden;不會(huì)生效。

總結(jié)

今天這篇文章主要講解了利用CSS完成頁(yè)面等比例縮放的最簡(jiǎn)單方式，你學(xué)會(huì)了嗎？

html頁(yè)面制作中，可以利用 CSS 中的 transform 屬性對(duì)圖片進(jìn)行旋轉(zhuǎn)，縮放，移動(dòng)或傾斜的操作。而今天我們只說(shuō)說(shuō) transform 屬性對(duì)圖片進(jìn)行等比例的縮放操作。

css transform 屬性的介紹

transform：該屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。它允許我們對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜的操作。

縮放使用值：

scaleY(n)：對(duì)高度進(jìn)行縮n倍的縮放

scaleX(n)：對(duì)寬度進(jìn)行縮放，n指的是縮放比例

scale(n)：對(duì)整體高度和寬度進(jìn)行縮放，n為縮放的比例，為數(shù)字

示例代碼：

transform: scale(2)

css圖片寬度縮放

scaleX()：可以對(duì)元素(圖片)的寬度進(jìn)行縮放，以下代碼是將原來(lái)的圖片的寬度放大了2倍。

示列代碼：

<div class="divimg">
 <img src="biao.png" >
 <br/>
 <!--寬度縮放-->
 <img src="biao.png" style="transform:scaleX(2);">
</div>

運(yùn)行結(jié)果：