title: Angular material 2 md-card width
body: <p>I'm having an issue with the md-card component</p>
  
  <pre><code>        &lt;md-card&gt;
              &lt;img height="200" width="200" md-card-image src="/resources/{{odd?.image?.path}}" /&gt;
              &lt;md-card-content&gt;
                  &lt;button md-button&gt;{{odd?.object?.name}}&lt;/button&gt;
              &lt;/md-card-content&gt;
          &lt;/md-card&gt;
  </code></pre>
  
  <p>I have this code, it creates a card with an image inside and some text under the image.
  I want the image to be of size 200x200 and i want the card to wrap the image completely but instead, the opposite happens, the card fills the entire width of the page and as a result, the image stretches to the size of the card</p>
  
  <p><a href="https://i.stack.imgur.com/BX5qv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BX5qv.png" alt="enter image description here"></a></p>
  
  <p>If i remove the md-card-image attribute from the img tag, it shows the image in 200x200 but the md-card is still stretched.</p>
  
  <p><a href="https://i.stack.imgur.com/JKBvy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JKBvy.png" alt="enter image description here"></a></p>
  
  <p>How can i maintain the size that i want for the image and make the md-card wrap around it?</p>