时间戳

首页 > 解决方案 > 如何使图像比其父级大 10%？

css - 如何使图像比其父级大 10%？

问题描述

我有以下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 分钟然后在我的开发过程中停止了，我不确定问题是什么......

在此处输入图像描述

有任何想法吗 ？

标签： cssionic-framework

解决方案

max-width是限制你的形象成长。max-width: 110%;一起申请width: 110%;

ionic.min.css将最大宽度设置为 100%。不知道为什么它对你有用。也许在开发过程中没有加载这个文件。

推荐阅读