居中并使图像越过屏幕边缘 - 离子

Question

我正在尝试使用Ionic构建一个应用程序主页，并且在增加图像大小的同时难以对图像进行居中。这就是我的＆＃34;图像标题＆＃34;目前看起来像：

理想情况下，它看起来像这样：

以下是相关元素的html和css：

HTML

<div id="header-image-container">
  <img class="curved-img" src="../../assets//img/arctic-aurora-aurora-borealis-258112.jpg" alt="Header image">
</div>

CSS

.curved-img {
  margin-top: -30%;
  border-radius: 0 0 50% 50%;
  max-width: 50rem;
}

是否有办法让图像相对于主页面视图居中而忽略视图的限制？

谢谢！