如何用CSS实现hover弹出图片并确保其完全显示在视口内？

我有一个页面，希望鼠标悬停在链接上时弹出缩略图，点击链接时在新页面打开完整图片。以下代码实现了该功能，但弹出的图片可能会超出视口。请问是否可以仅使用CSS来确保弹出的缩略图完全显示在视口内？

原始HTML代码 #

<span class="popup-wrap">
  <a class="popup" href="images/flamingo.jpg">flamingo
    <span>
      <img src="images/flamingo.jpg" alt="flamingo" />
    </span>
  </a>
  <a class="popup" href="images/enough.jpg">enough
    <span>
      <img src="images/enough.jpg" alt="enough" />
    </span>
  </a>
</span>

原始CSS代码 #

.popup-wrap { position:relative;}
.popup span { 
    position:absolute;
    visibility:hidden;
}
.popup:hover, .popup:hover span { 
    visibility:visible;
    z-index:1;
}     
img {
  max-width: 200px;
  max-height: 200px;
}

可以通过固定定位+视口单位+计算函数实现，核心是将弹出层的定位基准改为视口，同时限制尺寸和位置避免超出。

修改后的CSS代码 #

.popup-wrap {
  position: relative;
}

.popup span {
  position: fixed; /* 改为基于视口的固定定位 */
  visibility: hidden;
  /* 计算弹出位置：居中且保留边距，避免超出视口 */
  left: max(16px, calc(50vw - 100px));
  top: max(16px, calc(50vh - 100px));
  z-index: 999; /* 提升层级避免被遮挡 */
}

.popup:hover span {
  visibility: visible;
}

.popup img {
  /* 限制图片尺寸：不超过200px，同时不超出视口（预留边距） */
  max-width: min(200px, calc(100vw - 32px));
  max-height: min(200px, calc(100vh - 32px));
  box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 可选：增加阴影提升可读性 */
}

原理说明 #

1. 固定定位：将弹出层的position从absolute改为fixed，定位基准变为浏览器视口，而非父元素，更容易控制在视口范围内。
2. 位置计算：用max()结合calc()计算left和top值：
   • 50vw - 100px让图片尽量水平居中（100px是图片最大宽度的一半）
   • max(16px, ...)确保弹出层和视口边缘至少保留16px的间距，避免贴边或超出
3. 尺寸限制：用min()函数给图片设置双重上限：既保留原有的200px最大尺寸，又确保在小屏幕上不会超出视口（减去32px的上下/左右边距）

内容的提问来源于stack exchange，提问作者russell