html - 动态生成图像？

Question

我正在尝试创建一个虚拟画廊，它根据正在展示的艺术品及其大小动态生成一个图像(或一组图像)。在我的浏览器中缩放图像大小时，我无法保持图像的绝对位置。也就是说，当浏览器显示高度发生变化时，图像会缩放不均匀。请参阅下面的 CodePen 了解我的意思。

有人对如何解决这个问题有建议吗？我注意到 Fine Art Multiple(单击链接，然后单击“在房间中查看”按钮)似乎使用自定义功能或第 3 方程序自动生成图像。如果我想要的东西在 CSS 中不可能实现，有谁知道我如何可行地做到这一点？

Fine Art Multiple 的虚拟画廊: https://fineartmultiple.com/buy-art/alex-katz-reclining-figure/

Answer 1

FAM 的示例图库之所以有效，是因为它的响应速度不如您的。如您所述，它是位于中心的生成图像。

我没有使用百分比，而是为您设置了一些固定宽度，并将房间图像移动到 background 属性中，而不是将其作为附加的 img 元素。

我还像示例中那样向左移动并离开屏幕，以确保人的轮廓在小屏幕上消失。

这个定位大部分依赖于左边的 margin 和 transform:

margin-left: 50%;
transform: translate(-50%,0);

此技术可用于完美居中和偏移任何元素。

http://codepen.io/anon/pen/RKpver?editors=0100