CODEWITHSUNDEEP
cssionic-framework
Ricky Levi
Ricky Levi

Reputation: 7997

How to make image 10% larger from its parent?

I have the following 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>

I'm trying to make the image a bit larger and centered just like the image below enter image description here

But as you can see the image is always 100% , it's funny that it worked for 10 minutes then stopped during my development, and I'm not sure what the issue is ...

enter image description here

Any ideas ?

Upvotes: 1

Views: 40

Answers (1)

Sudipto Roy
Sudipto Roy

Reputation: 1046

max-width is restricting your image to grow. Apply max-width: 110%; along with width: 110%;

ionic.min.css sets the max-width to 100%. Not sure why it worked for you. Maybe during development this file was not loaded.

Upvotes: 1

Related Questions