---
const { url, ratio, circle, transformEnlarge } = Astro.props
---

<!-- 图片 -->
<img
  src={url}
  class=`img-fluid object-fit-cover ${circle} ${transformEnlarge}`
  style=`aspect-ratio:${ratio}`
  alt=""
/>

<style>
  .transformEnlarge {
    transition: transform 1s ease;
    max-width: 100%;
    height: auto;
  }
  .transformEnlarge:hover {
    transform: scale(1.1);
    max-width: 100%;
    max-height: 100%;
  }
</style>
