将按钮放置在图像的右上角，以获取不同纵横比的图像

Question

我正在尝试将按钮定位在图像的右上角。

以下是我试图实现的代码的一小部分：https://jsfiddle.net/sc5vfu9e/3/

.modalDialog {
	position: fixed;
	font-family: "Proxima-Nova", sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 10;
text-align: center;
}
.modalDialog > div {
	position: relative;
	width: 100%;
	height: 100%;
}
.modalDialog img {
	max-width: 95%;
	max-height: 95%;
	position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.closeModal {
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	background: #606060;
	color: white;
	font-size: 0.5em;
	line-height: 25px;
	text-align: center;
	border-radius: 50%;
	text-decoration: none;
	width: 24px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	-moz-box-shadow: 1px 1px 3px #000;	
}
.closeModal:hover,
.closeModal:active,
.closeModal:focus {
	background: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modalDialog">
						<div>
							<img src="https://s-media-cache-ak0.pinimg.com/736x/f2/c3/9c/f2c39c1651d11f47c5a5f35f205663fa.jpg" alt="Image" id="">
							<a href="#" title="close" class="closeModal">x</a>
						</div>
					</div>

我将加载不同纵横比的图像如何在每种情况下都将关闭按钮放在图像的右上角？

附言：我是编程新手，所以请你不要太无知。

Answer 1

好的，试试这个JSfiddle

更新JSfiddle

.modalDialog {
position: fixed;
font-family: "Proxima-Nova", sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 10;
text-align: center;
}
.modalDialog > div {
position: relative;
width: 95%;
height: 95%;
margin: auto;
}
.modalDialog > div > div {
width: auto;
height: 95%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img {
max-width: 100%;
height: auto;
}
@media only screen and (min-width: 800px) {
img {
max-height: 95%;
width: auto;
}
}
.closeModal {
position: absolute;
right: -12px;
/* adjust these accordingly*/
top: -12px;
/*adjust these accordingly */
display: block;
background: #606060;
color: white;
font-size: 0.5em;
line-height: 25px;
text-align: center;
border-radius: 50%;
text-decoration: none;
width: 24px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
-moz-box-shadow: 1px 1px 3px #000;
}
.closeModal:hover,
.closeModal:active,
.closeModal:focus {
background: #333;
}

<div class="modalDialog">
<div>
<div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f2/c3/9c/f2c39c1651d11f47c5a5f35f205663fa.jpg" alt="Image" id="">
<a href="#" title="close" class="closeModal">x</a>
</div>
</div>
</div>

Answer 2

有人在脸书上帮了我一把。此解决方案使用视口高度而不是最大宽度，当未定义容器的高度时，最大宽度无法正常工作。

https://jsfiddle.net/sc5vfu9e/8/

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

Answer 3

试试这个。

这是你需要的吗？

.modalDialog {
	position: fixed;
	font-family: "Proxima-Nova", sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 10;
text-align: center;
}
.modalDialog > div {
	position: relative;
	width: 100%;
	height: 100%;
}
.modalDialog img {
	max-width: 95%;
	max-height: 95%;
	position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.closeModal {
	position: absolute;
	right: 0;
	top: 50%;
	display: block;
	background: #606060;
	color: white;
	font-size: 0.5em;
	line-height: 25px;
	text-align: center;
	border-radius: 50%;
	text-decoration: none;
	width: 24px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	-moz-box-shadow: 1px 1px 3px #000;	
}
.closeModal:hover,
.closeModal:active,
.closeModal:focus {
	background: #333;
}
.closeModal
{
top:0;
right:0;
}

<div class="modalDialog">
<div>
<img src="https://s-media-cache-ak0.pinimg.com/736x/f2/c3/9c/f2c39c1651d11f47c5a5f35f205663fa.jpg" alt="Image" id="">
<a href="#" title="close" class="closeModal">x</a>
</div>
</div>