使用对话框显示图片

时间:2016-03-29 13:09:42

标签: html css angularjs angular-material

我要做的是显示一个缩略图,当你点击它时,图片以全尺寸显示(在对话框内)。

我所能得到的只是一张不适合对话框的图片,或者是一张比图片宽的对话框。

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

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

enter image description here

编辑对话框的代码:

<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

enter image description here

编辑:到目前为止,我得到了这个:enter image description here

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

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

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:-1)

试过这个?

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