如何使图像比其父图像大10％？

Question

我有以下StackBlitz

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<style>
  .allow-overflow {
    overflow: visible;
  }
  .shadow-mdb-card {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);
  }
  .rounded-25 {
    -webkit-border-radius: .25rem;
    border-radius: .25rem;
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
  }
  img {
    vertical-align: middle;
    border-style: none;
    position: relative;
    display: block;
    width: 110%;    
    /* left: -5%;     When 110% will work, this will center the image */
    z-index: 2;
  }
</style>

<ion-content padding>
  <ion-card class="allow-overflow">
    <img class="card-img-wider shadow-mdb-card rounded-25" src="https://mdbootstrap.com/img/Photos/Others/photo6.jpg"/>
    <ion-card-content>
      <ion-card-title>
        Nine Inch Nails Live
        </ion-card-title>
      <p>
        The most popular industrial group ever, and largely
        responsible for bringing the music to a mass audience.
      </p>
    </ion-card-content>
  </ion-card>
</ion-content>

我正在尝试将图像放大并居中，就像下面的图像一样

但是您可以看到图像始终是100％的，有趣的是它工作了10分钟，然后在我的开发过程中停了下来，我不确定是什么问题...

有什么想法吗？

Answer 1

max-width限制了图像的增长。与max-width: 110%;一起应用width: 110%;

ionic.min.css 将最大宽度设置为100％。不知道为什么对您有用。也许在开发过程中未加载此文件。