响应式图片

基本信息

• 用例名称：响应式图片
• 测试类型：网页生成
• 评测维度：响应式布局
• 参与评测的模型数：164 个

系统提示词（System Prompt）

你是一名前端开发工程师，擅长 HTML、CSS 和响应式布局设计。 你的任务是根据需求编写结构清晰、样式规范的网页代码。 所有代码需在单个 HTML 文件中完成，确保可独立运行。 使用语义化 HTML 标签组织页面结构。 使用 CSS 媒体查询实现基础响应式布局。 图片需配置必要的可访问性属性。 代码风格简洁易读，适合入门级开发者理解和维护。

用户提示词（User Prompt）

# 响应式图片展示页面（基础版） ## 应用要求 - 所有代码（HTML、CSS）必须在一个 HTML 文件中 - 直接输出完整的、可独立运行的 HTML 代码 - 图片使用在线占位图服务（如 https://picsum.photos 或 https://via.placeholder.com） ## 页面结构与功能要求 ### 1. 页面头部（Header） - 包含网站标题和简短描述文字 - 背景使用纯色或简单的线性渐变（2种颜色即可） - 文字居中显示，颜色与背景形成明显对比 ### 2. 图文混排区域 - **桌面端（≥768px）**：图片与文字左右并排，各占 50%，使用 Flexbox 实现 - **手机端（<768px）**：图片在上，文字在下，垂直堆叠布局 - 包含至少 2 组图文混排内容 - 图片宽度在各断点下自适应容器宽度 ### 3. 图片画廊 - 使用 CSS Flexbox 或 Grid 实现简单的多列布局： - 手机端（<768px）：1 列 - 桌面端（≥768px）：3 列 - 所有画廊图片使用 `object-fit: cover` 保持统一比例（宽高比 4:3 或 16:9） - 图片悬停时添加简单的透明度变化效果（opacity 0.8） - 包含至少 6 张图片 ### 4. 图片基础要求 - 所有 `<img>` 标签必须包含有意义的 `alt` 文本 - 图片设置 `width: 100%` 使其自适应容器宽度 - 非首屏图片使用 `loading="lazy"` 延迟加载 ### 5. 断点设计 - 仅需实现一个断点：768px - 手机端（<768px）：单列布局，图片全宽显示 - 桌面端（≥768px）：多列布局 ### 6. 页面底部（Footer） - 包含简单的版权信息文字 - 背景色与 Header 保持一致 - 文字居中显示 请直接输出完整的 HTML 代码。

各模型评测结果

1. 第 1：qwen3.6-plus-preview，得分 100.0 分 — 查看该模型的详细评测结果
2. 第 2：Claude Opus 4.6，得分 96.1 分 — 查看该模型的详细评测结果
3. 第 3：GLM-5.1，得分 95.5 分 — 查看该模型的详细评测结果
4. 第 4：Google: Gemma 4 26B A4B ，得分 95.5 分 — 查看该模型的详细评测结果
5. 第 5：glm-4.7，得分 95.4 分 — 查看该模型的详细评测结果
6. 第 6：kimi-k2.6，得分 95.4 分 — 查看该模型的详细评测结果
7. 第 7：GLM-5v-turbo，得分 95.1 分 — 查看该模型的详细评测结果
8. 第 8：Anthropic: Claude Sonnet 4.6，得分 95.0 分 — 查看该模型的详细评测结果
9. 第 9：Elephant，得分 94.8 分 — 查看该模型的详细评测结果
10. 第 10：qwen3.5-omni-plus，得分 94.8 分 — 查看该模型的详细评测结果
11. 第 11：OpenAI: GPT-5 Mini，得分 94.5 分 — 查看该模型的详细评测结果
12. 第 12：Claude Opus 4 7，得分 94.0 分 — 查看该模型的详细评测结果
13. 第 13：Google: Gemma 4 31B，得分 93.6 分 — 查看该模型的详细评测结果
14. 第 14：deepseek-v3.2，得分 93.3 分 — 查看该模型的详细评测结果
15. 第 15：mimo-v2-flash，得分 93.1 分 — 查看该模型的详细评测结果
16. 第 16：OpenAI: gpt-oss-20b，得分 92.6 分 — 查看该模型的详细评测结果
17. 第 17：qwen3.5-omni-flash，得分 92.1 分 — 查看该模型的详细评测结果
18. 第 18：qwen3-coder-plus，得分 92.0 分 — 查看该模型的详细评测结果
19. 第 19：doubao-seed-2-0-pro，得分 91.6 分 — 查看该模型的详细评测结果
20. 第 20：OpenAI: gpt-oss-120b，得分 91.6 分 — 查看该模型的详细评测结果
21. 第 21：doubao-seed-2-0-code，得分 89.38 分 — 查看该模型的详细评测结果
22. 第 22：MiniMax-M2.7，得分 85.5 分 — 查看该模型的详细评测结果
23. 第 23：Google: Gemini 3.1 Pro Preview，得分 85.0 分 — 查看该模型的详细评测结果
24. 第 24：kimi-k2.5，得分 84.7 分 — 查看该模型的详细评测结果
25. 第 25：OpenAI: GPT-5.4，得分 84.4 分 — 查看该模型的详细评测结果
26. 第 26：qwen3.5-35b-a3b，得分 83.9 分 — 查看该模型的详细评测结果
27. 第 27：Meituan: LongCat Flash Chat，得分 83.6 分 — 查看该模型的详细评测结果
28. 第 28：OpenAI: GPT-5 Nano，得分 83.5 分 — 查看该模型的详细评测结果
29. 第 29：Anthropic: Claude Haiku 4.5，得分 83.3 分 — 查看该模型的详细评测结果
30. 第 30：hunyuan-pro，得分 83.1 分 — 查看该模型的详细评测结果
31. 第 31：glm-5-turbo，得分 83.1 分 — 查看该模型的详细评测结果
32. 第 32：xAI: Grok 4.20 Beta，得分 82.5 分 — 查看该模型的详细评测结果
33. 第 33：doubao-seed-2-0-lite，得分 82.2 分 — 查看该模型的详细评测结果
34. 第 34：doubao-seed-1-8，得分 82.0 分 — 查看该模型的详细评测结果
35. 第 35：qwen3.5-27b，得分 81.4 分 — 查看该模型的详细评测结果
36. 第 36：mimo-v2-omni，得分 81.2 分 — 查看该模型的详细评测结果
37. 第 37：Qwen: Qwen3.5-9B，得分 80.7 分 — 查看该模型的详细评测结果
38. 第 38：xAI: Grok 4.1 Fast，得分 80.6 分 — 查看该模型的详细评测结果
39. 第 39：mimo-v2-pro，得分 80.2 分 — 查看该模型的详细评测结果
40. 第 40：StepFun: Step 3.5 Flash，得分 80.1 分 — 查看该模型的详细评测结果
41. 第 41：doubao-seed-1-6，得分 79.7 分 — 查看该模型的详细评测结果
42. 第 42：NVIDIA: Nemotron 3 Super (free)，得分 79.7 分 — 查看该模型的详细评测结果
43. 第 43：MiniMax-M2.1，得分 79.1 分 — 查看该模型的详细评测结果
44. 第 44：doubao-seed-2-0-mini，得分 79.1 分 — 查看该模型的详细评测结果
45. 第 45：doubao-seed-1-6-flash，得分 78.3 分 — 查看该模型的详细评测结果
46. 第 46：Google: Gemini 3 Flash Preview，得分 77.8 分 — 查看该模型的详细评测结果
47. 第 47：Grok 4，得分 75.8 分 — 查看该模型的详细评测结果
48. 第 48：OpenAI: GPT-4o-mini，得分 75.5 分 — 查看该模型的详细评测结果
49. 第 49：Google: Gemini 2.5 Flash Lite，得分 73.0 分 — 查看该模型的详细评测结果
50. 第 50：hunyuan-turbo，得分 72.2 分 — 查看该模型的详细评测结果
51. 第 51：MiniMax-M2.5，得分 72.1 分 — 查看该模型的详细评测结果
52. 第 52：hunyuan-large，得分 71.8 分 — 查看该模型的详细评测结果
53. 第 53：Meta: Llama 3.3 70B Instruct，得分 66.6 分 — 查看该模型的详细评测结果
54. 第 54：Mistral: Mistral Nemo，得分 59.7 分 — 查看该模型的详细评测结果
55. 第 55：qwen3-max，得分 0.8 分 — 查看该模型的详细评测结果
56. 第 56：GPT-5.2，得分 — 分 — 查看该模型的详细评测结果