本地网页Photos标签加载图片异常：图片被限在带滚动条小框内

问题根源 #

• 用<object>标签加载图片是错误用法，它原本用于嵌入HTML文档、插件等内容，加载图片时会自带默认滚动容器，导致图片被压缩在小区域内。
• JS里的display: auto是无效CSS属性值，浏览器会直接忽略该设置。
• 未对图片设置自适应显示样式，也未确保容器能根据图片尺寸自动调整。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<style>
body {
  font-size: 25px;
  font-family: Arial;
  margin: 0; /* 移除body默认边距，避免不必要留白 */
}

.tab {
  overflow: visible;
}

.tab button {
  background-color: inherit;
  float: right;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 7px 40px;
}

.tabcontent {
  display: none;
  margin-top: 10px; /* 给标签内容和按钮之间增加间距 */
}

/* 图片自适应样式，保持比例且不超出容器 */
.tabcontent img {
  max-width: 100%;
  height: auto;
  display: block; /* 移除图片默认的行内元素间距 */
}
</style>
</head>
<body>
<div class="tab">
  <button class="tablinks" onclick="openActivity(event, 'Photos')">Photos</button>
</div>
<div id="Photos" class="tabcontent">
</div>
<script>
function openActivity(evt, activityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none"; /* 修正为有效的display值 */
    tabcontent[i].innerHTML = ''; /* 清空未激活标签的内容 */
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  // 给激活的标签页添加图片
  const activeTab = document.getElementById(activityName);
  activeTab.innerHTML = '<img src="Paris.jpg" alt="Paris">';
  activeTab.style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
</body>
</html>

关键修改点说明 #

• 替换<object>为<img>：这是加载图片的标准方式，不会自带滚动容器，能正常渲染图片。
• 修正display: auto为display: none：正确隐藏未激活标签页，避免样式冲突。
• 添加图片自适应样式：max-width:100%和height:auto确保图片在容器宽度不足时自动缩小，保持原比例；display:block移除图片默认的底部留白。
• 清空未激活标签内容：避免切换标签时残留之前的图片元素。

修改后，容器会根据图片尺寸自动调整（屏幕宽度小于图片宽度时，图片自动缩小适配），不会出现滚动条，能完整显示图片。

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