同一张 AI 配图，宽封面和竖卡的裁切位置分开调

这张配图的帐篷在右边。放进方形或竖向卡片以后，把画面对齐到右侧，可以让帐篷留在可视区域里。

这张纸艺风插画由image_gen生成，原图1672×941；文件与确切提示词都放进了附件。重复使用提示词不保证得到同一构图。下面的网页演示始终使用这同一张原图，只改变浏览器内的显示方式。

在三个容器里分别选位置

附件里有三个独立预览：16:9宽封面、1:1方卡、3:4竖卡。各自有横向、纵向位置滑杆和可复制的CSS，默认都是50%/50%。

解压后进入有 index.html 的材料目录，运行：

python -m http.server 8765 --bind 127.0.0.1

浏览器地址栏输入 127.0.0.1:8765。需要Python 3启动本机服务器；页面本身没有第三方前端库。结束时在终端按Ctrl+C。

先保持宽封面50%/50%，观察整幅山景。再只把方卡或竖卡的横向位置调到100%，纵向留50%，对比右侧帐篷与望远镜是否回到画面里；另外两张卡的位置不会跟着改变。想重新比较，重置本卡即可回到50%/50%。

选择好位置后复制对应CSS。复制成功才会显示成功提示；若浏览器拒绝写剪贴板，页面会选中文本并提示手动复制，需要再按复制快捷键。

把选好的位置写进CSS

下面给一个方卡的最小结构，cover.png 与页面放在同一目录；同样的规则也由工具为每张卡生成：

<div class="cover-square">
  <img src="cover.png" alt="纸艺山景，右侧有橙色帐篷与望远镜">
</div>
<style>
.cover-square {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.cover-square > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}
</style>

需要宽封面时使用 aspect-ratio: 16 / 9；竖卡使用 3 / 4，并分别观察、选择位置。

cover 保持图片比例并填满容器，超出容器的部分会被裁切。横向位置0%对齐左边缘、50%居中、100%对齐右边缘；位置由你观察后选择，每种容器可以不同。

不要把方卡选好的位置直接当成所有封面的通用值。宽封面可保留大部分山景，竖卡只能容纳其中一段；两个相隔很远的元素可能无法同时放进去。需要展示完整构图时，可以改用 object-fit: contain 并接受留边。

这张横图在方卡和竖卡里主要有横向裁切余量；纵向滑杆可能看不出变化，原因是图片高度已经贴合容器。滑杆控制内容对齐，不会补画容器外的内容，也不会自动识别主体。附件中的 cover.png 像素没有被这些操作修改。

出图时也可以提前给构图要求

包里保存了这次的完整英文生成提示词。给自己的配图安排构图时，可把以下要求与具体场景一起使用：

生成一张横向的纸艺风场景插画。主物体集中在画面右侧，周围留出空间，
左侧用简单背景承接，画面不含文字、标志、水印或界面元素。
这张图后续会放进宽封面、方形卡片和竖卡，请让主物体紧凑，
不要把必须同时出现的关键物体分别放在两端。

生成后仍要放进实际容器看。构图要求是输入提示，不保证每次生成都精确满足位置或尺寸；这次实际结果以附件原图为准。

这份页面实际用Chromium 154.0.8037.57、Playwright 1.62.0跑了19项检查：三比例与cover几何、位置独立更新、溢出轴的像素变化与无余量轴不变、复制出的CSS在独立最小页面重现、真实剪贴板成功和拒绝回退、键盘、390px布局，以及缺图失败提示。最终ZIP已在新目录独立解压，用本机HTTP复跑，19项均通过。

验证前后 cover.png 哈希一致，也与保存的生成文件一致。若要复跑，按README准备Playwright和Chromium，再运行 python verify.py --browser /usr/bin/chromium；这是本次Linux环境使用的浏览器路径。验证针对这份页面与这张图的显示行为。

下载原始PNG、确切出图提示词、完整HTML、CSS工具提示词与浏览器验证材料（ZIP，11个文件）

参考：MDN object-fit、object-position 文档与OpenAI图像提示指南，2026-10-25查阅。