элемент не может переполнить HTML CSS

Question

Я новичок в этом CSS и HTML В последнее время я пытаюсь сделать простой сайт с верхней панелью навигации вверху. Однако я обнаружил, что верхняя панель навигации не будет переполнена, даже если для нее установлено значение «overflow = scroll»

ниже мой код: 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

Поместите ниже стили в вашем классе изображения. Надеюсь, что это делает ваше изображение отзывчивым

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

Answer 3

Если проблема с отображением заключается в том, что загруженное изображение намного шире, чем div topnav (и область просмотра), вы можете добавить правило css, чтобы ограничить ширину любого элемента img:

img { max-width: 100vw; }

В этом примере максимальная ширина изображения устанавливается равной 100% ширины области просмотра (и изображение должно оставаться в масштабе с самим собой).

РЕДАКТИРОВАТЬ: Чтобы растянуть панель навигации доразмер изображения (с его исходными размерами - например, если изображение в два раза шире окна браузера, измените панель навигации так, чтобы оно также было в два раза шире окна браузера), вместо редактирования CSS,думаю, вам, возможно, придется использовать скрипт для обновления ширины панели навигации после загрузки изображения.

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 достигла бы этого, но эта настройка на самом деле является внутренней.Другими словами, если на панели навигации нет места для отображения всего ее содержимого (в этом случае кнопки загрузки, «Очистить», «Отменить», «Сохранить рисунок» и т. Д.), «Overflow: scroll» сообщаетэто позволяет вам прокручивать ВНУТРИ панель навигации, чтобы увидеть дочерние элементы, которые были обрезаны.