Отображение полной высоты на изображении (с использованием обложки) без полноэкранного браузера

Question

Я только хочу добавить изображение (размер 1920x1080) в мой HTML для моего экрана 1920x1080. Дело в том, что если я вижу свой веб в полноэкранном режиме (F11), он работает отлично, но если я вижу его нормально (с окном операционной системы, закладками браузера и т. Д.), Это уменьшает высоту изображения. Используемый код CSS следующий:

html,body{
 margin:0;
 padding:0;
 height:100%;
 overflow: hidden;
 background-image: url("image.jpg");
 background-color: white;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

Есть ли способ получить изображение совершенно без полноэкранного режима? Или узнать, сколько высоты занимает мое окно и браузер? Потому что, если нет, то другие люди с таким же размером экрана монитора, но с разными браузерами и ОС могут иметь разные результаты.

Answer 1

размер фона: авто авто;

Это сохранит исходный размер (и будет обрезан по краю). «Cover» всегда изменяет размер изображения, чтобы покрыть контейнер.

Кроме того, вы можете проверить размер экрана пользователя и соответственно изменить размер фона.

html, body {
    background-size: auto auto;
}

@media only screen and (max-height: 720px) {
  html, body {
    background size: 1280px 720px;
  }
}

@media only screen and (max-height: 480px) {
  html, body {
    background size: 800px 480px;
  }
}

и т.д.

Вы также можете указать контейнеру "min-height" или "min-width" в css, чтобы изображение не было обрезано, даже если размер экрана немного меньше указанного вами.

Пример:

@media only screen and (max-height: 480px) {
  html, body {
    background size: 800px 480px;
    min-width: 800px;
    min-height: 480px;
  }
}

Answer 2

Стиль, который, возможно, может делать то, что вы хотите, это background-size: auto 100%;, поэтому он принимает высоту браузера к размеру фона, сохраняя пропорции ширины.

Попробуйте использовать этот стиль, чтобы высота изображения всегда была высотой вашего браузера. Плохо то, что изображение, если оно не имеет большой ширины, может иметь белые линии по бокам.

html {
  height: 100%;
  background: url("image.jpg");
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

Answer 3

Я проверяю различные сети, чтобы увидеть эффект, который я описал.Во всем, что я нашел, есть эффект обрезки из-за окна браузера (в высоте изображения).Вместо полной высоты 1080px мы обычно видим обрезанные по высоте изображения.Поэтому я предполагаю, что неизбежно немного обрезать его, если мы не заходим в Интернет в полноэкранном режиме.

Одно мини-решение - решить, где его обрезать (background-position: center top; обрезает дночасть).Другое - сделать веб с полем сверху (не рекомендуется для людей, которые посещают другие методы: мобильный, полноэкранный и т. Д.)