Html 在图像的右上角放置一个按钮，用于显示不同纵横比的图像

我正在尝试将按钮放置在图像的右上角

下面是我试图实现的代码的一小部分：

.modalDialog{
位置：固定；
字体系列：“Proxima Nova”，无衬线；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：10；
文本对齐：居中；
}
.modalDialog>div{
位置：相对位置；
宽度：100%；
身高：100%；
}
.modalDialog img{
最大宽度：95%；
最大高度：95%；
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
.closeModal{
位置：绝对位置；
右：0；
最高：50%；
显示：块；
背景#606060；
颜色：白色；
字体大小：0.5em；
线高：25px；
文本对齐：居中；
边界半径：50%；
文字装饰：无；
宽度：24px；
-webkit边界半径：50%；
-moz边界半径：50%；
盒影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
-莫兹盒阴影：1px 1px 3px#000；
}
.closeModal:悬停，
.closeModal：活动，
.关闭模式：焦点{
背景：#333；
}

试试这个

这是你需要的吗

.modalDialog{
位置：固定；
字体系列：“Proxima Nova”，无衬线；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：10；
文本对齐：居中；
}
.modalDialog>div{
位置：相对位置；
宽度：100%；
身高：100%；
}
.modalDialog img{
最大宽度：95%；
最大高度：95%；
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
}
.closeModal{
位置：绝对位置；
右：0；
最高：50%；
显示：块；
背景#606060；
颜色：白色；
字体大小：0.5em；
线高：25px；
文本对齐：居中；
边界半径：50%；
文字装饰：无；
宽度：24px；
-webkit边界半径：50%；
-moz边界半径：50%；
盒影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
-莫兹盒阴影：1px 1px 3px#000；
}
.closeModal:悬停，
.closeModal：活动，
.关闭模式：焦点{
背景：#333；
}
.closeModal
{
排名：0；
右：0；
}

好的，试试这个

已更新

.modalDialog{
位置：固定；
字体系列：“Proxima Nova”，无衬线；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：10；
文本对齐：居中；
}
.modalDialog>div{
位置：相对位置；
宽度：95%；
身高：95%；
保证金：自动；
}
.modalDialog>div>div{
宽度：自动；
身高：95%；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
img{
最大宽度：100%；
高度：自动；
}
@仅介质屏幕和（最小宽度：800px）{
img{
最大高度：95%；
宽度：自动；
}
}
.closeModal{
位置：绝对位置；
右：-12px；
/*相应地调整这些参数*/
顶部：-12px；
/*相应地调整这些参数*/
显示：块；
背景#606060；
颜色：白色；
字体大小：0.5em；
线高：25px；
文本对齐：居中；
边界半径：50%；
文字装饰：无；
宽度：24px；
-webkit边界半径：50%；
-moz边界半径：50%；
盒影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
-莫兹盒阴影：1px 1px 3px#000；
}
.closeModal:悬停，
.closeModal：活动，
.关闭模式：焦点{
背景：#333；
}

---

有人在facebook上帮了我的忙。此解决方案使用视口高度而不是最大宽度，在未定义容器高度时，最大宽度不起作用

---

谢谢你的回答，但我需要的是图片右上角的按钮，而不是页面右上角的按钮。@AmitSaxena好的，我明白你的意思了。让我试着做一些更改，感谢您的回复，但这在更大的屏幕上不起作用：谢谢，可以，但不需要使用媒体查询。不管怎样，有人在facebook上帮了我，我会把答案贴在这里。

.modalDialog img {
display: inline-block;
max-width: 100%;
max-height: 100vh;
}