20240326-1443

cloudflare-page/OneAPI-imgbed-MIX.html

@@ -17,11 +17,17 @@
             border-radius: 5px;
             display: flex;
             align-items: center;
+            flex-grow: 1; /* 使复制按钮填充剩余空间 */
+        }
+        .preview-container {
+            max-width: calc(100% - 100px); /* 图片预览容器的最大宽度为外部框架宽度减去按钮的宽度 */
+            max-height: calc(8 * 50px); /* 最大高度不超过8个上传按钮的高度 */
+            overflow: hidden; /* 超出部分隐藏 */
         }
         .preview-img {
-            max-height: calc(8 * 50px); /* 最大高度不超过8个上传按钮的高度 */
+            max-width: 100%; /* 图片预览的最大宽度为容器宽度 */
-            max-width: 100%; /* 横向不超过外部框架的大小 */
+            height: auto; /* 自适应高度 */
-            margin-top: 10px;
+            display: block; /* 防止图片下面产生空白 */
         }
         .copy-button {
             width: auto;
@@ -96,16 +102,12 @@
                     resultItem.innerHTML = `
                         <button class="btn btn-success mr-2 copy-button" onclick="copyUrl(this)">复制URL</button>
                         <span class="mr-2">${file.name}</span>
+                        <div class="preview-container">
+                            <img src="${data}" class="preview-img">
+                        </div>
                         <input type="text" class="form-control" value="${data}" readonly>
                     `;
 
-                if (enablePreview) {
-                    const preview = document.createElement('img');
-                    preview.src = data;
-                    preview.className = 'preview-img';
-                    resultItem.appendChild(preview);
-                }
-
                     resultContainer.appendChild(resultItem);
                     resultContainer.style.display = 'flex';
                 })