i'm trying to use cards with image, problem is images are smaller size than the card width and img-fluid suppose to make it full size. the outcome look something like this

<div class="col-md-6">
            <!--Card-->
            <div class="card">
                <!--Card image-->
                <div class="view overlay hm-white-slight">
                    <img src="https://media.giphy.com/media/3ohzdRJohhv7YrRBf2/giphy.gif" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>
                <!--/.Card image-->
                <!--Social buttons-->
                <div class="card-share">
                    <div class="social-reveal">
                        <!--Facebook-->
                        <a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
                        <!--Twitter-->
                        <a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
                        <!--Google -->
                        <a type="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
                    </div>
                    <a class="btn-floating btn-action share-toggle primary-color-dark float-right"><i class="fa fa-share-alt"></i></a>
                </div>
                <!--/Social buttons-->
                <!--Card content-->
                <div class="card-block">
                    <!--Title-->
                    <h4 class="card-title">Card title</h4>
                    <hr>
                    <!--Text-->
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <div class="text-center">
                        <a class="btn btn-primary">Read more</a>
                    </div>
                </div>
                <!--/.Card content-->
            </div>
            <!--/.Card-->
        </div>  

if you see the result of the above card there is a gap between the right border and the picture. i investigate the problem and understood there img-fluid is setting the max-width to 100% and not the width. as it's mentioned here http://stackoverflow.com/questions/14938428/why-would-max-width-not-work-on-this max-width only works if there is a width for the image. i'm not sure if it's a designed behavior or not and what is best way to fix it. do i just simply set width:100% for every card? or is it a bug ?

---