html頁面中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>

運行結果：

用鼠標改變元素的尺寸。

如需了解更多有關 resizable 交互的細節，請查看 API 文檔可調整尺寸小部件（Resizable Widget）。

默認功能

在任意的 DOM 元素上啟用 resizable 功能。通過鼠標拖拽右邊或底邊的邊框到所需的寬度或高度。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 默認功能</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable();
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">縮放（Resizable）</h3></div>
</body></html>

查看演示

動畫

使用 animate 選項（布爾值）使縮放行為動畫化。當該選項設置為 true 時，拖拽輪廓到所需的位置，元素會在拖拽停止時以動畫形式調整到該尺寸。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 動畫</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 .ui-resizable-helper { border: 1px dotted gray; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 animate: true
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">動畫</h3></div>
</body></html>

查看演示

限制縮放區域

定義縮放區域的邊界。使用 containment 選項來指定一個父級的 DOM 元素或一個 jQuery 選擇器，比如 'document.'。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 限制縮放區域</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #container { width: 300px; height: 300px; }
 #container h3 { text-align: center; margin: 0; margin-bottom: 10px; }
 #resizable { background-position: top left; width: 150px; height: 150px; }
 #resizable, #container { padding: 0.5em; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 containment: "#container"
 });
 });
 </script></head><body>
<div id="container" class="ui-widget-content">
 <h3 class="ui-widget-header">限制</h3>
 <div id="resizable" class="ui-state-active">
 <h3 class="ui-widget-header">縮放（Resizable）</h3>
 </div></div>
</body></html>

查看演示

延遲開始

通過 delay 選項設置延遲開始縮放的毫秒數。通過 distance 選項設置光標被按下且拖拽指定像素后才允許縮放。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 延遲開始</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 delay: 1000
 });
 $( "#resizable2" ).resizable({
 distance: 40
 });
 });
 </script></head><body>
<h3 class="docs">時間延遲 (ms):</h3><div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">時間</h3></div>
<h3 class="docs">距離延遲 (px):</h3><div id="resizable2" class="ui-widget-content">
 <h3 class="ui-widget-header">距離</h3></div>
</body></html>

查看演示

助手

通過設置 helper 選項為一個 CSS class，當縮放時只顯示元素的輪廓。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 助手</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 .ui-resizable-helper { border: 2px dotted #00F; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 helper: "ui-resizable-helper"
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">助手</h3></div>
</body></html>

查看演示

最大/最小尺寸

使用 maxHeight、maxWidth、minHeight 和 minWidth 選項限制 resizable 元素的最大或最小高度或寬度。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 最大/最小尺寸</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 200px; height: 150px; padding: 5px; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 maxHeight: 250,
 maxWidth: 350,
 minHeight: 150,
 minWidth: 200
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">放大/縮小</h3></div>
</body></html>

查看演示

保持縱橫比

保持現有的縱橫比或設置一個新的縱橫比來限制縮放比例。設置 aspectRatio 選項為 true，且可選地傳遞一個新的比率（比如，4/3）。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 保持縱橫比</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 160px; height: 90px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 aspectRatio: 16 / 9
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">保持縱橫比</h3></div>
</body></html>

查看演示

對齊到網格

對齊 resizable 元素到網格。通過 grid 選項設置網格單元的尺寸（以像素為單位的高度和寬度）。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 對齊到網格</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { width: 150px; height: 150px; padding: 0.5em; }
 #resizable h3 { text-align: center; margin: 0; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 grid: 50
 });
 });
 </script></head><body>
<div id="resizable" class="ui-widget-content">
 <h3 class="ui-widget-header">網格</h3></div>
</body></html>

同步縮放

通過點擊并拖拽一個元素的邊來同時調整多個元素的尺寸。給 alsoResize 選項傳遞一個共享的選擇器。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 同步縮放</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 #resizable { background-position: top left; }
 #resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
 #resizable h3, #also h3 { text-align: center; margin: 0; }
 #also { margin-top: 1em; }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 alsoResize: "#also"
 });
 $( "#also" ).resizable();
 });
 </script></head><body>
<div id="resizable" class="ui-widget-header">
 <h3 class="ui-state-active">縮放</h3></div>
<div id="also" class="ui-widget-content">
 <h3 class="ui-widget-header">同步縮放</h3></div>
</body></html>

查看演示

文本框

可縮放的文本框。

<!doctype html><html lang="en"><head>
 <meta charset="utf-8">
 <title>jQuery UI 縮放（Resizable） - 文本框</title>
 <link rel="stylesheet" >
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <link rel="stylesheet" >
 <style>
 .ui-resizable-se {
 bottom: 17px;
 }
 </style>
 <script>
 $(function() {
 $( "#resizable" ).resizable({
 handles: "se"
 });
 });
 </script></head><body>
<textarea id="resizable" rows="5" cols="20"></textarea>
</body></html>

視覺反饋

通過設置 ghost 選項為 true，可在縮放期間顯示一個半透明的元素，而不是顯示一個實際的元素。

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

在線咨詢

上一篇：HTML-1（study）
下一篇：HtmlParse：一款超輕量級的HTML文件解析和爬取工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html頁面中css縮放圖片的方法

css transform 屬性的介紹

css圖片寬度縮放

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

您的項目需求