title: Angular Material Card and Carousel sizes
body: <p>I am currently working on a webpage, and I am struggling with Angular Material Card size and Angular Material Carousel size as well.</p>
  <p>I've tried adding a lot of different properties to both of the elements, but nothing seems to do the trick here.</p>
  <p>The card currently looks like <a href="https://u.cubeupload.com/elgiov/STACKOVERFLOW.png" rel="nofollow noreferrer">this</a>.</p>
  <p>It looks horrible. I want the card to be smaller, the carousel to be smaller as well, and that the images fit the carousel, as for now, the images are shown cropped, as more than half of the picture can't be seen.</p>
  <p>Any ideas how to fix this?</p>
  <p>The code is the following:</p>
  <pre><code>&lt;div fxLayout=&quot;row&quot; fxLayoutAlign=&quot;start start&quot; fxLayoutGap=&quot;15px&quot;&gt;
    &lt;mat-card style= &quot;width: fit-content;&quot; class=&quot;results&quot;&gt;
      &lt;mat-card-header&gt;
        &lt;div mat-card-avatar class=&quot;example-header-image&quot;&gt;&lt;/div&gt;
        &lt;mat-card-title&gt;{{myShowLodgment.Name}}&lt;/mat-card-title&gt;
        &lt;mat-card-subtitle&gt;Estrellas: {{myShowLodgment.NumberOfStars}}&lt;/mat-card-subtitle&gt;
      &lt;/mat-card-header&gt;
      &lt;mat-card-content&gt;
        &lt;mat-carousel [hideArrows]=&quot;false&quot; [hideIndicators]=&quot;false&quot; timings=&quot;200ms ease-in&quot; [autoplay]=&quot;true&quot;
          interval=&quot;4000&quot; color=&quot;white&quot;&gt;
          &lt;mat-carousel-slide *ngFor=&quot;let slide of myShowLodgment.Photos&quot; overlayColor=&quot;#ffffff&quot; [hideOverlay]=&quot;false&quot;&gt;
            &lt;img [src]=&quot;slide&quot; alt=&quot;&quot;&gt;
          &lt;/mat-carousel-slide&gt;
        &lt;/mat-carousel&gt;
  
        &lt;p&gt;
          &lt;b&gt;Descripción&lt;/b&gt;: {{myShowLodgment.Description}}
          &lt;br&gt;
          &lt;b&gt;Dirección&lt;/b&gt;: {{myShowLodgment.Address}}
          &lt;br&gt;
          &lt;b&gt;Precio por noche&lt;/b&gt;: ${{myShowLodgment.PricePerNight}}
          &lt;br&gt;
          &lt;b&gt;Precio total&lt;/b&gt;: ${{myShowLodgment.TotalPrice}}
  
        &lt;/p&gt;
  
        &lt;mat-card-actions&gt;
          &lt;button *ngIf=&quot;canBook(myShowLodgment.IsFull)&quot; mat-stroked-button color=&quot;primary&quot; disabled&gt;Alojamiento sin
            capacidad!&lt;/button&gt;
          &lt;button *ngIf=&quot;!canBook(myShowLodgment.IsFull)&quot; mat-stroked-button color=&quot;primary&quot;
            (click)=&quot;submitBooking(myShowLodgment.Id)&quot;&gt;Reservar!&lt;/button&gt;
        &lt;/mat-card-actions&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Thank you for your time, and any help is appreciated.</p>