html - 使用对话框显示图片

Question

我想做的是显示缩略图，当您单击它时，图片会以全尺寸显示(在对话框内)。

我所能得到的要么是一张不适合对话框的图片，要么是一个比图片宽的对话框。

关于如何实现这一目标的任何想法？

没有风格的当前结果(你看到两侧的电梯):

编辑对话框的代码:

<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 设置为:

编辑:到目前为止我得到了这个:

我通过删除其最大高度值 (scss) 更改了对话框样式:

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

Answer 1

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