How do I fit an image inside of a dialog box in Angular Material?

Question

I'm trying to fit an image completely inside of a dialog window without overflowing off the screen or having scroll wheels appear on each side. I want the Dialog window to never fill up the entire screen but most of it (like 80% either axis). But I'm stuck on the images never auto sizing to fit in that box.

Currently everything I try will show a bar on the right side if the height of the image is to big.

Ideally I'd want to have an image that auto resizes itself to fit in the screen.

Here's my Dialog css

.full-width-dialog .mat-dialog-container {
  // max-width: 80vw !important;
  max-height: 80vh !important;
  padding: 0;
  display: flex;
  flex-direction: column;
}

And my Image container css

.image-cont {
  display: flex;
  flex: 1 1 0;

  img {
    max-width: 100%;
    max-height: 100%;
  }
}

And the html template for the dialog box.

<div class="image-cont">
  <img
    id="{{ data.id }}"
    src="...SOME_IMAGE_LIBRARY___/id/{{ data.id }}/{{ data.width }}/{{ data.height}}" 
  />
</div>

Note the src will always be an image much larger than the screen.

Answer 1

You could set the overflow on the dialog box to hidden if you don't want to make it a background image set to cover like Dominik mentioned. This will hide the scroll bar.

.full-width-dialog .mat-dialog-container {
  // max-width: 80vw !important;
  max-height: 80vh !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow:hidden;
}

Answer 2

I was able to solve this by forcing it a little bit.

<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="3vw" class="dialog">
  <div class="image-cont">
    <img
      id="{{ data.id }}"
      src="https://picsum.photos/id/{{ data.id }}/{{ data.original_width }}/{{
        data.original_height
      }}"
    />
  </div>
</div>

Then for CSS

.image-cont {
  position: relative;
  height: 100%;
  width: 80%;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    display: block;
    max-width: 100%;
    max-height: 100%;
  }
}

.dialog {
  height: 80vh;
  width: 80vw;
  display: flex;
  flex-direction: row;
}

and

.full-width-dialog .mat-dialog-container {
  padding: 0;
  background: none;
  box-shadow: none;
}

Applied fully to the dialog.