调用element.requestFullscreen()使div全屏时，如何让内部图片居中并拉伸适配

嘿，我看了你的代码和问题，其实问题出在图片所在的容器没有利用好flex布局的特性，还有图片本身的适配规则没设置到位。咱们一步步来解决：

问题根源分析 #

你的#slideshow已经设置了display:flex，所以左右按钮能正常居中显示，但里面的.slide0容器（就是放图片的那个div）并没有被设置为占据剩余空间，也没有让内部的图片居中。再加上图片只设置了max-width和max-height，全屏时父容器没有明确的尺寸约束，导致图片只能在左上角显示原大小。

具体解决方案 #

我们只需要调整两处CSS就能搞定：

1. 调整.slide0的布局
   让它在flex容器里占满除了左右按钮之外的所有空间，同时内部内容居中：

.slide0 {
  flex: 1; /* 关键：让这个容器填满slideshow的剩余可用空间 */
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
  overflow: hidden; /* 防止图片超出容器边界 */
}

2. 优化图片的适配规则
   让图片能自适应容器大小，同时保持比例：

#dsc03837 {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片比例，完整显示在容器内（不会裁剪） */
  /* 如果你想要图片填满容器（允许裁剪但不变形），可以换成 object-fit: cover; */
  /* 要是不在乎变形只想完全填满，用 object-fit: fill; */
}

补充说明 #

• 你的#slideshow已经是flex容器，默认的flex-direction: row会让.slide0、.prev、.next在一行排列，加上.slide0的flex:1，它就会自动占据按钮之外的所有空间。
• 全屏模式下，#container会被浏览器拉伸到全屏尺寸，而内部的flex布局会自动适配这个新尺寸，图片也就跟着居中并适配了。

修改后的完整CSS参考 #

.grpelem {
  display: inline;
  float: left;
}

#container {
  z-index: 530;
  fit-position:auto;
  max-width:100%;
  max-height:100%;
  position: relative;
}

#slideshow{
  z-index: 544;
  border-width: 0px;
  border-color: transparent;
  background-color: #4F4F4F;
  border-radius: 10px;
  max-width:100%;
  max-height:100%;
  display:flex;
}

/* 新增/修改的slide0样式 */
.slide0 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#dsc03837 {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 根据需求替换成cover或fill */
}

这样调整后，你再点击图片触发全屏，应该就能看到图片居中且自适应全屏空间的效果啦！

备注：内容来源于stack exchange，提问作者c3rebro