Q:

Show image with its maximum width only if it doesn't fit the div

I'm using Materialize framework and I'm interested in the Cards component (The small version).
The code goes like: (the small class limits the height of the card to 300px)
<div class="card small">
    <div class="card-image">
      <img src="images/sample-1.jpg">
      <span class="card-title">Card Title</span>
    </div>
    <div class="card-content">
      <p>I am a very simple card. I am good at containing small bits of information.
      I am convenient because I require little markup to use effectively.</p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
</div>

Here's what I want to achieve:

The image must be in the center of its parent
If the image has a width that's smaller that the cards width, then it should be used with it's full width in the card
If it's larger than the cards width then it should be cropped to fit the card
It should be responsive (using responsive-img class)

A:

The image must be in the center of its parent

This can be achieved by applying margin: 0 auto; to .card-image and setting a max-width that is smaller than the max-width of .card.

If the image has a width that's smaller that the cards width, then it
  should be used with it's full width in the card

Does this mean the image should not be larger than its original size? If so the demo below should fulfill the criteria. .card-image is set to have a max-width of 400px and .responsive-img has a width of 350px.

If it's larger than the cards width then it should be cropped to fit
  the card

This can be achieved by setting overflow: hidden; to .card-image.

It should be responsive (using responsive-img class)

The demo below uses .responsive-img on the image. To center the image even when it's cropped, you may set top, bottom, left, right values to -100% and margin to auto. Be sure to set .card-image to position relative and .responsive-img to absolute.
Here's a demo:
https://jsfiddle.net/suefeng/updr2ehp/1/
If you resize the window, the image should crop when the window is narrower. The image is 350x300px.

