如何为图片添加大尺寸翻页锚点（< >）且不改变图片位置与尺寸

这里提供两种符合需求的实现方式，都不会改动原有图片的位置与尺寸：

方案一：两侧悬浮式导航按钮 #

利用容器相对定位 + 锚点绝对定位的方式，让<、>按钮悬浮在图片左右两侧，不占用额外布局空间：

<html style="height: 100%;">
 <head>
  <meta name="viewport" content="width=device-width, minimum-scale=0.1">
   <title>bb2.jpg (640×480)</title>
   <style>
     /* 图片容器：相对定位，作为锚点的定位基准 */
     .image-container {
       position: relative;
       display: block;
       margin: auto;
     }
     /* 导航锚点样式：大尺寸、悬浮、垂直居中 */
     .nav-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       font-size: 48px;
       color: #fff;
       text-decoration: none;
       padding: 0 16px;
       opacity: 0.7;
       transition: opacity 0.3s;
     }
     .nav-btn:hover {
       opacity: 1;
     }
     .prev-btn {
       left: -60px; /* 调整与图片左侧的间距 */
     }
     .next-btn {
       right: -60px; /* 调整与图片右侧的间距 */
     }
   </style>
 </head>
 <body style="margin: 0px; height: 100%; background-color: rgb(14, 14, 14); display: flex; align-items: center; justify-content: center;">
  <!-- 用容器包裹图片，完全保留原有img样式 -->
  <div class="image-container">
    <img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="images/bb2.jpg">
    <!-- 上一张图片跳转链接 -->
    <a href="prev-image.html" class="nav-btn prev-btn">&lt;</a>
    <!-- 下一张图片跳转链接 -->
    <a href="next-image.html" class="nav-btn next-btn">&gt;</a>
  </div>
 </body>
</html>

核心细节：

• 给图片套相对定位容器，作为锚点的定位参照，完全不影响图片原有布局
• 锚点通过绝对定位实现垂直居中，left/right属性控制与图片的间距
• 按钮添加hover透明度变化，优化交互体验
• body用flex布局确保图片容器在页面垂直水平居中，和原页面效果一致

方案二：下方居中式导航按钮 #

如果需要把导航按钮放在图片下方居中位置，用flex垂直布局实现：

<html style="height: 100%;">
 <head>
  <meta name="viewport" content="width=device-width, minimum-scale=0.1">
   <title>bb2.jpg (640×480)</title>
   <style>
     .image-wrapper {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 24px; /* 图片与按钮组的间距 */
     }
     .nav-group {
       display: flex;
       gap: 32px; /* 两个按钮之间的间距 */
     }
     .nav-btn {
       font-size: 48px;
       color: #fff;
       text-decoration: none;
       opacity: 0.7;
       transition: opacity 0.3s;
     }
     .nav-btn:hover {
       opacity: 1;
     }
   </style>
 </head>
 <body style="margin: 0px; height: 100%; background-color: rgb(14, 14, 14); display: flex; align-items: center; justify-content: center;">
  <div class="image-wrapper">
    <img style="display: block;-webkit-user-select: none;margin: auto;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="images/bb2.jpg">
    <div class="nav-group">
      <a href="prev-image.html" class="nav-btn">&lt;</a>
      <a href="next-image.html" class="nav-btn">&gt;</a>
    </div>
  </div>
 </body>
</html>

核心细节：

• 用flex垂直布局包裹图片和导航组，确保按钮在图片下方居中对齐
• 原有图片样式完全保留，位置、尺寸不受任何影响
• 通过gap属性控制间距，布局简洁易维护

两种方案都可以根据需求调整按钮的大小、颜色、间距等样式，只需修改CSS对应属性即可。

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