我想在一个div里面可以显示图片和视屏，两者只能出现其一，比如我先选择了一张图片，再选视屏的时候就显示视屏，但不会超出我原来div的大小，如何设置

您可以使用 JavaScript 监听用户选择的文件类型，然后根据文件类型的不同，动态插入相应的 HTML 标签。例如，如果用户选择了视频文件，则可以插入一个 video 标签，如果选择了图片，则可以插入一个 img 标签。

在插入标签之前，您可以先设置 div 的宽度和高度，然后通过 CSS 的 overflow 属性来控制内部元素的显示方式。如果您希望在 div 内部显示滚动条，可以将 overflow 属性设置为 auto 或 scroll，如果您不希望显示滚动条，可以将其设置为 hidden。

下面是一个示例代码，您可以根据自己的需求进行修改：

<div id="container" style="width: 500px; height: 500px; overflow: hidden;"></div>

<script>
  const container = document.getElementById('container');
  const input = document.createElement('input');
  input.type = 'file';
  input.accept = 'image/*, video/*';
  input.onchange = function() {
    const file = this.files[0];
    const type = file.type.split('/')[0];
    if (type === 'image') {
      const img = document.createElement('img');
      img.src = URL.createObjectURL(file);
      img.style.maxWidth = '100%';
      img.onload = function() {
        const ratio = this.width / this.height;
        if (ratio > container.clientWidth / container.clientHeight) {
          this.style.height = '100%';
        } else {
          this.style.width = '100%';
        }
      };
      container.innerHTML = '';
      container.appendChild(img);
    } else if (type === 'video') {
      const video = document.createElement('video');
      video.src = URL.createObjectURL(file);
      video.style.maxWidth = '100%';
      video.style.maxHeight = '100%';
      video.controls = true;
      container.innerHTML = '';
      container.appendChild(video);
    }
  };
  container.appendChild(input);
</script>

这个示例代码监听了 input 元素的 onchange 事件，当用户选择了文件后，会根据文件类型动态插入 img 或 video 元素，并根据元素的宽高比调整元素的大小，确保不会超出 div 的大小。同时，还设置了元素的最大宽高，以避免图片或视频太大而导致页面样式错乱。