html - 为不同宽高比的图像在图像的右上角放置一个按钮

Question

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

这是我尝试实现的一小部分代码的 fiddle :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>

我将加载不同宽高比的图像。如何在每种情况下都在图像右上角设置关闭按钮？

PS:我是编程新手，所以请多多包涵。

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>