图片点击放大功能实现需求：单HTML文件，禁用外部JS/CSS

Got it, here's a self-contained HTML solution that implements the click-to-zoom image effect you need—perfect for your WebView-based HTML editor since everything’s bundled into a single file with no external dependencies:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击放大图片</title>
    <style>
        /* 隐藏复选框（仅作为状态触发器，无需显示） */
        input[type=checkbox] {
            display: none;
        }
        /* 容器样式优化布局 */
        .layout {
            text-align: center;
            margin: 20px 0;
        }
        /* 图片初始样式 + 平滑过渡动画 */
        .layout img {
            width: 100%;
            max-width: 800px; /* 可选：限制未放大时的最大宽度，避免过宽 */
            transition: transform 0.25s ease; /* 让缩放过程更流畅 */
            cursor: zoom-in; /* 视觉提示：图片可点击放大 */
        }
        /* 复选框选中时的图片放大状态 */
        input[type=checkbox]:checked ~ label > img {
            transform: scale(2); /* 可自定义缩放倍数，比如改成1.5更温和 */
            cursor: zoom-out; /* 视觉提示：点击可缩小 */
            position: relative;
            z-index: 10; /* 确保放大的图片显示在最上层 */
        }
    </style>
</head>
<body>
    <div class="layout">
        <input type="checkbox" id="zoomCheck">
        <label for="zoomCheck">
            <img src="http://myServerName.com/assets/newsImage/纳吉.jpg" alt="纳吉图片" />
        </label>
    </div>
</body>
</html>

• 无JS实现逻辑: 用隐藏的复选框作为状态触发器，完全不需要JavaScript，轻量且适配WebView环境
• 流畅动画: transition: transform 0.25s ease 让缩放过程不是生硬的跳变，而是平滑过渡
• 用户友好提示: 光标在不同状态下切换为zoom-in/zoom-out，让用户清晰知道点击操作的效果
• 自定义选项:
  • 修改scale(2)的值可以调整放大倍数（比如scale(1.8)适合更小的放大比例）
  • 调整.layout的text-align可以改变图片的对齐方式（比如改成left让图片左对齐）
  • 移除max-width属性可以让图片完全占满容器宽度

这个代码可以直接复制到你的HTML编辑器中使用，不需要任何外部文件，完美适配WebView场景！

内容的提问来源于stack exchange，提问作者Yuyang He