Question

我的目标是在div容器内显示任何尺寸的图像，图像上的覆盖图位于右上角。

但这里有诀窍，宽度和宽度。可以使用JavaScript动态更改容器的高度，我希望图像在容器内以正确的宽高比显示。

我有一个可行的解决方案，但它要求我将图像的max-width和max-height设置为等于div容器的宽度和高度。有没有办法解决这个问题，而不必将img的max-width设置为容器的宽度，max-height也是如此？我尝试了将max-height: 100%和max-width: 100%设置为img的解决方案，但它似乎没有帮助。

我对所有建议持开放态度。

这是我目前的解决方案：

＆＃13;

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.container {
  background-color: #666;
  vertical-align: middle;
  text-align: center;
}

.img-container {
  position: relative;
  display: inline-block;
}

.img {
  max-width: 248px;
  max-height: 145px;
  display: inline-block;
}

.overlay {
  width: 40px;
  background-color: red;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 8px;
}

＆＃13;

<html lang="en">

<head></head>

<body>
  <div class="container" style="width: 248px; height: 145px;">
    <div class="img-container">
      <img class="img" src="https://i.imgur.com/bZmRQr8.jpg" />
      <div class="overlay">Avatar and name will be displayed here</div>
    </div>
  </div>
</body>

</html>

＆＃13;

动态尺寸

0 个答案: