Используйте диалоговое окно для отображения изображения

Question

То, что я пытаюсь сделать, это показать миниатюру, и когда вы нажимаете на нее, изображение отображается в полном размере (внутри диалогового окна).

Все, что я могу получить, это либо изображение, которое не подходит в диалоговом окне, либо диалоговом окне, которое шире изображения.

Любые идеи о том, как достичь этого?

Текущий результат без стиля (вы видите лифта по бокам):

EDIT код для диалога:

<md-dialog aria-label="Picture" class="dialog-picture"> 
    <md-dialog-content> 
     <div> 
      <img src="images/random.jpg" alt="image at full size"> 
     </div> 
    </md-dialog-content> 
</md-dialog> 

EDIT со свойством max-width комплект:

EDIT: До сих пор я получил это:

Я изменил диалоговый стиль, удалив его значение макс высоты (SCSS):

.dialog-picture { 
    max-height: none; 
    img { 
     max-width: 100%; 
     max-height: 100%; 
    } 
} 

Answer 1

img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
} 

Answer 2

Пробовал это?

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