元素无法溢出HTML CSS

Question

我是此CSS和HTML的新手最近，我尝试在顶部使用顶部导航栏制作一个简单的网站。但是我发现，即使已经设置为"溢出=滚动"

，顶部导航栏也不会溢出

以下是我的代码：CSS

      .topnav {
    overflow: scroll;
    background-color: #333;
  }
  .topnav a,
  .topnav input {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .topnav a.active {
    background-color: #4caf50;
    color: white;
  }

html

  <div class="topnav">
  <input
    type="file"
    id="getval"
    style="color:#FFFFFF;  width: 200px; font-size: 8px;"
  />
  <a id="clearBut" href="">Clear</a>
  <a id="undoBut">Undo</a>
  <a id="saveBut">Save Picture</a>
  <a id="savecsvBut">Save CSV</a>
  <a id="saveJsonBut">Save JSON</a>
  <a id="showtoolbox">Toolbox</a>
</div>

当我没有上传并显示图片时看起来还不错：当我没有上传任何图片

时

上传比窗口大的图片时看起来很奇怪上传图片

后，显示器变得很奇怪

请帮助并向我建议该怎么做。谢谢

Answer 1

我会将TopNav类设置为：

.topnav { max-height: 100vh; }

和IMG：

img {display: block; margin: 10px auto; max-width: 90vw; }

Answer 2

如果显示的问题是上传图像比TopNav Div（和视口）宽得多，则可以添加CSS规则以限制任何img元素的宽度：

img { max-width: 100vw; }

此示例将将最大图像宽度设置为视口宽度的100％（图像应与自身保持规模）。

编辑： 要将Navbar扩展到图像的大小（其原始尺寸 - 例如，如果图像的宽度是浏览器窗口的两倍，请更改Navbar，以便它的宽度是浏览器窗口的两倍）除了编辑CSS之外，我认为您可能必须使用脚本来更新图像加载后更新Navbar的宽度。

var image = document.getElementById('uploaded-image'); //replace "uploaded-image" with the id attribute of your image element, 
                                                       //as defined in the <img> tag
image.onload = function () {
 document.getElementsByClassName('topnav')[0].style.width = image.width + "px";
}

我看到在CSS中设置"溢出：滚动"的设置会在哪里有意义，但是该设置实际上是内部的。换句话说，如果Navbar没有显示其所有内容的空间（在这种情况下，上传按钮，" clear"，" undo"，"保存图片"，等等），"溢出：scroll"告诉它可以让您在Navbar中滚动，以查看被切断的子元素。

Answer 3

在图像类中放置下面的样式。希望它能使您的图像响应

.image-class-name {
  width: 100%;
  max-width: 100%;
  height: auto;
}