我正在尝试创建一个虚拟图库，根据正在显示的图稿和图片的大小来动态生成图像（或图像集）。在浏览器中缩放图像大小时，我无法保持图像位置绝对。也就是说，当浏览器显示高度改变时，图像将不均匀地缩放。请参阅下面的CodePen，我的意思。
有人有关于如何解决这个问题的建议吗？我注意到Fine Art Multiple（点击链接，然后是房间视图按钮）似乎使用自定义功能或第三方程序自动生成他们的图像。有没有人知道我怎么可能做到这一点，如果我想要的东西在CSS中是不可能的？
Fine Art Multiple`s虚拟画廊： https://fineartmultiple.com/buy-art/alex-katz-reclining-figure/
答案 0 :(得分：0)
FAM的示例图库之所以有效，是因为它不像你的那样敏感。如您所述，它是生成的图像，位于中心。
我没有使用百分比，而是为您设置了一些固定的宽度，并将房间图像移动到background属性，而不是将其作为额外的img元素。
我还确保这个人的轮廓在小屏幕上消失了，就像在示例中一样向左移动到屏幕外。
此定位的大部分依赖于左margin与transform的结合：
margin-left: 50%;
transform: translate(-50%,0);
此技术可用于完美居中和偏移任何元素。