时间戳

首页 > 解决方案 > 居中并使图像越过屏幕边缘 - Ionic

html - 居中并使图像越过屏幕边缘 - Ionic

问题描述

我正在尝试使用 Ionic 构建应用程序主页，并且在增加图像大小时无法居中图像。这就是我的“图像标题”目前的样子：

当前的

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

期望的

以下是相关元素的 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;
}

有没有一种方法可以使图像相对于主页视图居中而忽略视图的限制？

谢谢！

标签： htmlcssionic-frameworkweb

解决方案

推荐阅读