How to get card image automatically resized to content height?

ionic-v1
1

Hi, I’ve currently taken code from the tutorial to display a card with an image in the middle.

<ion-content scroll="false" has-header="true" padding="true" >
    <div class="card">

        <div class="item item-avatar">
            <!--<img src="avatar.jpg">-->
            <h2>Pretty Hate Machine</h2>
            <p>Nine Inch Nails</p>
        </div>

        <div class="item item-image" style="height: auto">
            <img class="" src="images(red)/00_Fool.jpg" >
        </div>

        <a class="item item-icon-left assertive" href="#">
            <i class="icon ion-music-note"></i>
            Random Comment
        </a>

    </div>
</ion-content>

I’m finding though that if the image is large, it will cause the content to start scrolling.
What I rather want is for the image (preferably the middle div that contains it) to automatically resize itself so that the entire card never starts scrolling, so that the entire card can be seen from the screen.

Any ideas how to go about this? Putting height:100% on div class=“card” along with height:auto on the middle div (as shown in above code) isn’t working.
Thanks,

2

Hi, did you find a solution to this? I am having the same issue, where some image sizes cause the non-scrollable content to cut beneath my page footer.

3

@martihag No, I haven’t. I’ve created a github issue though:

It would be nice if you could perhaps +1 it to gain some interest.

2 Likes