Working with cards

I have a problem resizeing cards, I am using boostrap and I want to put a image on the left but when I am resizing to some width the card explode because there are div of buttons that pull the bottom of the card and the div of the img doesn’t expand too,

Good: https://gyazo.com/e374d46d9fc2735bbec7ca1e2b72c7b5
Bad: https://gyazo.com/2fe6bf04a469bda5206bc9cb1311d4a6

Code:

<div class="card hoverable">
        <div class="row">
            <div class="col-lg-3 col-md-5 col-sm-6">
                <img src="http://materializecss.com/images/sample-1.jpg" class="img-responsive card-img-left">
            </div>
            <div class="col-lg-9 col-md-7 col-sm-6 card-block">
                <div class="header">
                    <h2>
                        title
                    </h2>
                </div>
                <div class="body">
                    description
                    <div class="m-t-10">
                        <button type="button" class="btn btn-primary waves-effect">READ</button>
                        <button type="button" class="btn bg-teal waves-effect">EDIT</button>
                        <button type="button" class="btn btn-grey waves-effect pull-right">DELETE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

jordifib,

Why do you think the image does not become wider as the height of the outer container increases?

Is something limiting the width or height of the image?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.