使用对话框显示图片

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>

编辑属性 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; 
}

Answer 2

试过这个吗？

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

使用对话框显示图片

Use a dialog to display a picture

html

css

angularjs

angular-material