要实现保持固定的右侧位置并进行水平缩放，可以使用CSS和JavaScript来实现。

HTML部分：

CSS部分：

#container {
  position: relative;
  width: 100%;
  max-width: 800px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

#content {
  position: absolute;
  right: 0; /* 固定右侧位置 */
  width: 100%;
  height: 100%;
  overflow-x: scroll; /* 水平滚动条 */
}

JavaScript部分：

window.addEventListener('resize', function() {
  var container = document.getElementById('container');
  var content = document.getElementById('content');
  
  // 计算水平缩放比例
  var scale = container.offsetWidth / content.offsetWidth;
  
  // 应用缩放
  content.style.transform = 'scale(' + scale + ')';
});

这段代码使用position: absolute将内容容器固定在右侧，并设置了overflow-x: scroll来显示水平滚动条。然后使用JavaScript监听窗口大小变化事件，在事件处理程序中计算水平缩放比例，并应用到内容容器上，实现水平缩放效果。