用宽度从右到左显示图像？

Question

我曾尝试在此处查看类似问题的答案，但没有解决我的问题。 Quarter of a circle 我想从右到左增加图像的宽度。我已经按照这里的建议尝试了position absolute:0 和right:0，但无济于事。宽度似乎从右到左增加，但图像的左侧首先显示出来。

我想要做的是从右侧增加宽度或从图像底部增加高度，所以应该看起来线条向上。

我已经设法使用这样的剪辑路径获得了我想要的动画：

@keyframes circleanim3 {
0%{
    clip-path: inset(100% 0% 0% 0%);
 
}
100%{
     clip-path: inset(0% 0% 0% 0%);    
}

不幸的是，边缘或 safari 似乎不支持剪辑路径。有没有其他简单的解决方案？

Answer 1

如果您知道图像的比例或者是height 和width，则可以使用object-fit 和object-position css 属性：

:root {
  --img-width: 600px;
  --img-height: 337px;
}

.container {
  display: flex;
  justify-content: flex-end;
}

img {
  object-fit: cover;
  object-position: 100% 0;
  width: 0;
  height: var(--img-height);
  animation: rightToLeft 2s infinite;
}

@keyframes rightToLeft {
  0% {
    width: 0;
  }
  100% {
    width: var(--img-width);
  }
}

<div class='container'>
  <img src='https://d33wubrfki0l68.cloudfront.net/a9c7e461090fc25097e6391a5bb823b0f28ba008/1672b/images/css/object-fit/example-object-fit.jpg' class='alligator-turtle' />
</div>