根据容器大小(和照片尺寸)对图像的背景位置进行动画处理

时间:2020-09-15 06:36:18

标签: javascript css animation background css-animations

希望在这里指向正确的方向。

我有一个主要的div背景容器,该容器将用户上传的照片显示为全屏的“飞溅”背景。

但是肖像和风景照片的内在本质(以及在移动设备和台式机上都可以“全屏”查看此容器的事实)使得很难容纳各种各样的用户照片。 (在一个设备视图或另一个设备视图中,照片的关键焦点被切断,并且裁剪插件无法真正解决此问题)。

这是我要实现的目标:

如果用户照片的尺寸比例比容器宽,我想使background-position动画从左到右“平移”。

如果照片比容器的尺寸高,则从上到下“平移”。

通过这种方式,所有上传的照片都会显示整个照片。指针?

0 个答案:

没有答案