言

在響應式布局逐漸成為主流的今天，網頁或者app的流式布局已經不算是一個新鮮的詞匯了。今天我要講的一個內容也是跟頁面流式布局有關，如何讓你的網頁實現完美的縮放？

網頁布局

我們可以很快速的寫出一個響應式布局的頁面，首先看一下效果圖。

網頁布局

其中html部分的代碼如下：

html部分代碼

css中的item代碼為：

css代碼

通過以上代碼，完成上述的流式布局后，在我們改變瀏覽器窗口大小時，div也會隨之進行縮放。

問題

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

當然不是！在改變瀏覽器窗口大小時，我們發現雖然div的寬度是進行了縮放，但是高度卻沒變，因此div的寬高比并未保持原始比例，我們可以看下以下的效果。

縮放后寬高比

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

我們需要達到的效果是在改變瀏覽器窗口大小時，div也會隨之進行等比例的縮放。

實現辦法

首先，可以使用Javascript代碼去實現，這是沒有問題的。但是綁定Javascript的onresize事件，在拖拽時可能會出卡頓現象，體驗不是很好。

接下來我們通過CSS來實現以上的效果。

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

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

因此我們可以在不用給父元素設置高度的時候，就可以通過padding-bottom屬性確定當前元素的高度。我們的做法如下。

1. 將元素的height屬性設為0，通過padding-bottom屬性確定元素高度。

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

修改后的CSS代碼如下。

修改后的CSS

修改后，我們再次調整瀏覽器窗口的大小，就會發現div是等比例的進行縮放，完美達到了我們的要求。

修改后等比例縮放

疑問

在這里，可能會有人有疑問如果設置overflow:hidden;那么里面的文字會不會因為超過height，就會被隱藏了？

答案是不會的，根據CSS2.1的規范，overflow只會對處于padding外面的內容生效，即只有超出了 padding區域的內容才會被overflow屬性隱藏掉。而在設置padding-bottom后，實際已經決定了元素的height屬性，因此overflow:hidden;不會生效。

總結

今天這篇文章主要講解了利用CSS完成頁面等比例縮放的最簡單方式，你學會了嗎？

html頁面制作中，可以利用 CSS 中的 transform 屬性對圖片進行旋轉，縮放，移動或傾斜的操作。而今天我們只說說 transform 屬性對圖片進行等比例的縮放操作。

css transform 屬性的介紹

transform：該屬性向元素應用 2D 或 3D 轉換。它允許我們對元素進行旋轉、縮放、移動或傾斜的操作。

縮放使用值：

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

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

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

示例代碼：

transform: scale(2)

css圖片寬度縮放

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

示列代碼：

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

運行結果：

了點時間寫的，蠻長時間了。個人很喜歡，一段很簡單的代碼，卻能夠實現很多功能。（因為代碼文字呈現沒有格式，難以閱讀，以后小編提供的代碼都以截圖方式呈現，底部有源碼鏈接）。

到底多簡單，先來看代碼

基于jQuery

基于jQuery

拖拽實例圖：

拖拽實例圖

將代碼剝離，只要寫5行就可以實現拖拽了，是不是很簡單：

調用方式

放大、縮小

我們給拖拽增加點功能，支持放大、縮小，先看實例圖:

放大、縮小

將代碼剝離，原先的代碼保留不變，增加一個綁定事件：

放大、縮小

這樣來實現放大、縮小、拖拽是不是很簡單，還能實現很多其他效果，大家慢慢領悟。

原理分析：

放大、縮小、拖拽都離不開在網頁上拖動鼠標，對于前端來說就是 document 的 mousemove，當鼠標在網頁上移動的時候，無時無刻不在觸發 mousemove 事件，當鼠標觸發事件時，什么時候需要執行我們特定的操作，這就是我們要做的了。我在 mousemove 中增加了幾個對象來判定是否進行操作：

• move：是否執行觸發操作

• move_target：操作的元素對象

• move_target.posix：操作對象的坐標

• call_down：mousemove的時候的回調函數，傳回來的this指向document

• call_up：當鼠標彈起的時候執行的回調函數，傳回來的this指向document

小提示：

• 簡單的操作，只需要設定 move_target 對象，設置 move_target 的時候不要忘記了 move_target.posix 哦；

• 復雜的操作可以通過call_down、call_up進行回調操作，這個時候是可以不用設置 move_target 對象的

深入研究

拖拽和放大、縮小實現了，但是有個問題，當我們鼠標點擊并滑動的時候，是會選中文本的，為了避免這個問題，大家可以自行百度

css 阻止文本選中

css 阻止文本選中

網頁的放大、縮小、拖拽事件就研究到這里了，小編不再對如何拓展進行深入講解，一切靠大家自行研究，權當課后作業了。～～

源碼鏈接地址：

http://orzcss.com/posts/d554a392/

本文內容均屬個人原創作品，轉載此文章須附上出處及原文鏈接。

加關注，定時推送，互動精彩多，若你有更好的見解，歡迎留言探討！