https://dc-tools.cc/img_resize

1<!DOCTYPE html>
2<html lang="zh-Hant">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
7    <meta http-equiv="Pragma" content="no-cache">
8    <meta http-equiv="Expires" content="0">
9    
10    <!-- Primary Meta Tags -->
11    <title>圖片調整/裁切 | DC Tools</title>
12    <meta name="title" content="圖片調整/裁切 | DC Tools">
13    <meta name="description" content="線上圖片尺寸調整與裁切工具，支援精準縮放、裁切與預覽，快速完成。">
14    <meta name="keywords" content="圖片裁切,圖片調整尺寸,圖片縮放,線上裁切,圖片改尺寸">
15    <meta name="author" content="DC Tools">
16    <meta name="robots" content="index, follow, max-image-preview:large">
17    <meta name="googlebot" content="index, follow, max-image-preview:large">
18    <meta name="language" content="zh-TW">
19    <meta name="application-name" content="DC Tools">
20    <meta name="theme-color" content="#2d2d2d">
21    
22    <!-- Open Graph / Facebook -->
23    <meta property="og:type" content="website">
24    <meta property="og:url" content="https://dc-tools.cc/img_resize">
25    <meta property="og:title" content="圖片調整/裁切 | DC Tools">
26    <meta property="og:description" content="線上圖片尺寸調整與裁切工具，支援精準縮放、裁切與預覽，快速完成。">
27    <meta property="og:image" content="https://dc-tools.cc/og-image.png">
28    <meta property="og:image:alt" content="DC Tools 線上工具">
29    <meta property="og:locale" content="zh_TW">
30    <meta property="og:site_name" content="DC Tools">
31    
32    <!-- Twitter -->
33    <meta property="twitter:card" content="summary_large_image">
34    <meta property="twitter:url" content="https://dc-tools.cc/img_resize">
35    <meta property="twitter:title" content="圖片調整/裁切 | DC Tools">
36    <meta property="twitter:description" content="線上圖片尺寸調整與裁切工具，支援精準縮放、裁切與預覽，快速完成。">
37    <meta property="twitter:image" content="https://dc-tools.cc/og-image.png">
38    
39    <!-- Canonical URL -->
40    <link rel="canonical" href="https://dc-tools.cc/img_resize">
41    <link rel="sitemap" type="application/xml" href="/sitemap.xml">
42    
43    <!-- Google Analytics (GA4) -->

43
44    <script async src="https://www.googletagmanager.com/gtag/js?id=

44G-F54LEP891Y

44"></script>
45    

45<script>
46      

46window.dataLayer = window.dataLayer || [];
47      function gtag(){dataLayer.push(arguments);}
48      gtag('js', new Date());
49      gtag('config', '

49G-F54LEP891Y

49');
50    

50</script>

50
51
52    <!-- Favicon -->
53    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
54
55    <!-- App Version (for curl-based verification) -->
56    <!-- NOTE: This value is replaced at build-time via Vite config. -->
57    <meta name="app-version" content="1.17.0" />
58
59    <style>
60      :root {
61        color-scheme: dark;
62        background: #0b1117;
63      }
64
65      body {
66        margin: 0;
67        background: #0b1117;
68      }
69
70      html[data-app="tarot"] body { background: #0c081e; }
71
72      #dc-app-loader {
73        position: fixed;
74        inset: 0;
75        z-index: 2147483647;
76        display: grid;
77        place-items: center;
78        min-height: 100vh;
79        background:
80          radial-gradient(circle at 16% 18%, rgba(52, 152, 219, 0.2), transparent 32rem),
81          radial-gradient(circle at 86% 12%, rgba(34, 197, 94, 0.13), transparent 30rem),
82          linear-gradient(135deg, #0b1117 0%, #101820 48%, #071017 100%);
83        color: #f8fafc;
84        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
85        opacity: 1;
86        transition: opacity 220ms ease;
87      }
88
89      #dc-app-loader.dc-app-loader-hide {
90        opacity: 0;
91        pointer-events: none;
92      }
93
94      .dc-app-loader-card {
95        width: min(420px, calc(100vw - 48px));
96        padding: 30px 28px;
97        border: 1px solid rgba(148, 163, 184, 0.24);
98        border-radius: 18px;
99        background: rgba(15, 23, 32, 0.82);
100        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
101        backdrop-filter: blur(16px);
102      }
103
104      .dc-app-loader-brand {
105        margin: 0 0 18px;
106        color: #4aa8ff;
107        font-size: 26px;
108        font-weight: 800;
109        letter-spacing: 0;
110      }
111
112      .dc-app-loader-title {
113        margin: 0;
114        font-size: 22px;
115        font-weight: 750;
116        line-height: 1.25;
117      }
118
119      .dc-app-loader-subtitle {
120        margin: 8px 0 22px;
121        color: #aeb8c4;
122        font-size: 15px;
123        line-height: 1.5;
124      }
125
126      .dc-app-loader-track {
127        position: relative;
128        height: 8px;
129        overflow: hidden;
130        border-radius: 999px;
131        background: rgba(148, 163, 184, 0.18);
132      }
133
134      .dc-app-loader-bar {
135        position: absolute;
136        inset: 0;
137        width: 42%;
138        border-radius: inherit;
139        background: linear-gradient(90deg, #55d6be, #4aa8ff, #f4c76b);
140        animation: dc-app-loader-slide 1.15s ease-in-out infinite;
141      }
142
143      @keyframes dc-app-loader-slide {
144        0% {
145          transform: translateX(-110%);
146        }
147        100% {
148          transform: translateX(260%);
149        }
150      }
151
152
153      /* 薛丁格的貓是獨立品牌:載入畫面不能出現 DC Tools 的藍色與字樣,
154         否則訪客看到的第一個畫面是另一個品牌。由下方 inline script 依路徑掛上。 */
155      #dc-app-loader.is-tarot {
156        background:
157          radial-gradient(circle at 50% 8%, rgba(76, 44, 143, 0.34), transparent 30rem),
158          radial-gradient(circle at 14% 92%, rgba(30, 58, 109, 0.26), transparent 28rem),
159          linear-gradient(180deg, #0a0716 0%, #120b2c 48%, #0c081e 100%);
160        color: #ece6f7;
161      }
162
163      #dc-app-loader.is-tarot .dc-app-loader-card {
164        border-color: rgba(217, 185, 108, 0.28);
165        background: rgba(18, 11, 44, 0.72);
166        text-align: center;
167      }
168
169      #dc-app-loader.is-tarot .dc-app-loader-brand {
170        color: #d9b96c;
171        font-family: 'Songti TC', 'Noto Serif TC', Georgia, serif;
172        font-size: 20px;
173        font-weight: 600;
174        letter-spacing: 0.28em;
175      }
176
177      #dc-app-loader.is-tarot .dc-app-loader-title {
178        font-size: 15px;
179        font-weight: 400;
180        color: #b3a8cf;
181        letter-spacing: 0.06em;
182      }
183
184      #dc-app-loader.is-tarot .dc-app-loader-subtitle {
185        color: #8f82b5;
186        font-size: 13px;
187      }
188
189      #dc-app-loader.is-tarot .dc-app-loader-track {
190        background: rgba(53, 41, 94, 0.6);
191      }
192
193      #dc-app-loader.is-tarot .dc-app-loader-bar {
194        background: linear-gradient(90deg, #6a5730, #e8cf8e, #6a5730);
195      }
196
197      .dc-app-loader-cat {

198        display: flex;
199        justify-content: center;
200        margin-bottom: 6px;
201        animation: dc-cat-breathe 4.2s ease-in-out infinite;
202      }
203
204      @keyframes dc-cat-breathe {
205        0%, 100% { transform: translateY(0) }
206        50%      { transform: translateY(-4px) }
207      }
208
209      @media (prefers-reduced-motion: reduce) {
210        .dc-app-loader-cat { animation: none; }
211      }
212
213      @media (prefers-reduced-motion: reduce) {
214        .dc-app-loader-bar {
215          animation: none;
216          transform: none;
217          width: 100%;
218        }
219      }
220    </style>
221    
222    <!-- Structured Data: Organization -->
223    

223<script type="application/ld+json">
224    {
225      "@context": "https://schema.org",
226      "@type": "Organization",
227      "name": "DC Tools",
228      "url": "https://dc-tools.cc/",
229      "logo": "https://dc-tools.cc/favicon.png",
230      "description": "免費線上工具集合：圖片轉換、PDF 合併壓縮、JSON 轉 CSV、資料清洗、影音剪輯等 75+ 工具。瀏覽器端處理，保護隱私。",
231      "email": "[email protected]",
232      "sameAs": [],
233      "foundingDate": "2026",
234      "knowsLanguage": ["zh-Hant", "en"]
235    }
236    </script>

236
237
238    <!-- Structured Data: WebSite with SearchAction -->
239    

239<script type="application/ld+json">
240    {
241      "@context": "https://schema.org",
242      "@type": "WebSite",
243      "name": "DC Tools",
244      "url": "https://dc-tools.cc/",
245      "description": "免費線上工具集合：圖片轉換/裁切/壓縮、PDF 合併/壓縮、JSON 轉 CSV、影音剪輯與抽獎工具。",
246      "inLanguage": "zh-Hant"
247    }
248    </script>

248
249
250    <!-- Structured Data: WebPage (dynamic, updated by usePageSeo) -->
251    

251<script type="application/ld+json" id="structured-data-page">{"@context":"https://schema.org","@graph":[{"@type":"WebPage","name":"圖片調整/裁切 | DC Tools","url":"https://dc-tools.cc/img_resize","description":"線上圖片尺寸調整與裁切工具，支援精準縮放、裁切與預覽，快速完成。","inLanguage":"zh-Hant","dateModified":"2026-10-01","isPartOf":{"@type":"WebSite","name":"DC Tools","url":"https://dc-tools.cc"}}]}</script>

251
252  

252<script type="module" crossorigin src="/assets/index-Cp6oVmJn.js"></script>

252
253  <link rel="stylesheet" crossorigin href="/assets/index-Dt_tlJvQ.css">
254  <meta name="app-version" content="1.17.0">
255    <meta property="og:image:width" content="1200">
256    <meta property="og:image:height" content="630">
257    <meta property="twitter:image:alt" content="DC Tools 線上工具">
258  </head>
259<body>
260    

260<script>
261      // 薛丁格的貓是獨立站,訪客的第一個畫面不能是 DC Tools。
262      // 這段只設旗標,讓 body 底色立刻是夜空色,不要先閃一下藍。
263      if (location.pathname.indexOf('/ai_tarot') === 0) {
264        document.documentElement.setAttribute('data-app', 'tarot');
265      }
266    </script>

266
267    <div id="dc-app-loader" role="status" aria-live="polite">
268      <div class="dc-app-loader-card">
269        <p class="dc-app-loader-brand">DC tools</p>
270        <p class="dc-app-loader-title">Loading DC tools</p>
271        <p class="dc-app-loader-subtitle">正在載入工具，請稍候...</p>
272        <div class="dc-app-loader-track" aria-hidden="true">
273          <div class="dc-app-loader-bar"></div>
274        </div>
275      </div>
276    </div>
277    

277<script>
278      // 緊接在 loader 之後同步執行:元素已存在,又趕在首次繪製前,所以不會閃爍。
279      (function () {
280        if (document.documentElement.getAttribute('data-app') !== 'tarot') return;
281        var el = document.getElementById('dc-app-loader');
282        if (!el) return;
283        el.classList.add('is-tarot');
284        var set = function (cls, text) {
285          var n = el.querySelector('.' + cls);
286          if (n) n.textContent = text;
287        };
288        set('dc-app-loader-brand', '\u2726 \u859B\u4E01\u683C\u7684\u8C93');
289        set('dc-app-loader-title', '\u6B63\u5728\u9EDE\u4EAE\u71ED\u706B\u2026');
290        set('dc-app-loader-subtitle', '\u963F\u859B\u6B63\u62B1\u8457\u4F60\u7684\u724C\uFF0C\u9084\u6C92\u7FFB\u958B');
291        // 阿薛:全黑的貓,抱著一張牌等你。載入這種空白時刻最需要有人陪著。
292        //
293        // 載入與互動角色由 scripts/build-axue-brand.py 產生同一組平滑向量。
294        var art = document.createElement('div');
295        art.className = 'dc-app-loader-cat';
296        var img = document.createElement('img');
297        img.src = '/mascots/axue/brand/axue-holdcard.svg';
298        img.width = 104;
299        img.height = 104;
300        img.alt = '';
301        img.setAttribute('aria-hidden', 'true');
302        art.appendChild(img);
303        var card = el.querySelector('.dc-app-loader-card');
304        if (card) card.insertBefore(art, card.firstChild);
305      })();
306    </script>

306
307    <div id="root"><main data-static-tool-directory="true" data-static-path="/img_resize">
308  <h1>圖片調整/裁切 | DC Tools</h1>
309  <p>線上圖片尺寸調整與裁切工具，支援精準縮放、裁切與預覽，快速完成。</p>
310  <p>分類：圖片工具</p>
311  <p><a href="/img_resize">開始使用這個工具</a></p>
312  <nav aria-label="相關工具">
313    <h2>相關工具</h2>
314    <ul>
315      <li><a href="/img_transfer">圖片轉換</a> - HEIC、HEIF 轉常用格式，也支援 PNG、JPG、WEBP 互轉</li>
316      <li><a href="/img_compress">圖片壓縮</a> - 減小圖片檔案大小，節省儲存空間</li>
317      <li><a href="/img_exif_cleaner">圖片 EXIF 資訊清除</a> - 檢查照片是否帶有 EXIF，並下載不含 metadata 的乾淨檔案</li>
318      <li><a href="/img_watermark">圖片浮水印</a> - 替單張或多張圖片套用文字或 Logo 浮水印</li>
319      <li><a href="/img_host">圖床服務</a> - 上傳圖片產生短網址連結</li>
320    </ul>
321  </nav>
322</main></div>
323</body>
324</html>