Условия, когда background-size: не отображает background-image

Я сослался на размер фона из MDN, но не могу понять, почему приведенный ниже фрагмент не отображает изображение iPhone, когда CSS body { width: 800px; height: 800px; } закомментирован (он работает, как и ожидалось, когда задано явное значение ширины/высоты). Изображение не отображается ни при применении body { width: 100%; height: 100%; }, ни при применении body { width: auto; height: auto; }.

Я хочу, чтобы изображение iPhone отображалось настолько большим, насколько это возможно, без каких-либо обрезков, что, я думаю, идентично описанию о background-size: contain. Я предполагаю, что это связано с шириной и высотой body, но я хочу полностью понять, что происходит.

body {
  background-image: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-color: black;
  width: 800px;
  height: 800px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="./src/styles.css" />
    <title>Reminders</title>
  </head>
  <body>
  </body>
</html>
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
25
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Итак, вот что происходит

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

если у отца есть определенный рост, он рассчитает и получит рост Но если высота отца установлена ​​​​на авто (что по умолчанию почти для всех html-элементов), CSS не может вычислить высоту!

давайте предположим, что вы установили высоту своего тела на 50%, поэтому CSS должен умножить высоту отца (html) на 50 и разделить результат на 100, почему он не может выполнить эту задачу? b'Coz: авто * 50/100 = ???

но если родитель (html в вашем случае) имеет определенную высоту (предположим, что это 400 пикселей), CSS может легко вычислить это:

400 * 50/100 = 200 пикселей

поэтому ни height:auto не работает так, как вы хотите, ни height:100%

потому что в обоих сценариях для высоты вашего тела установлено значение auto, а auto означает, что он принимает столько размера, сколько нужно вашим детям (ваше тело пусто, верно? поэтому высота будет равна 0)

но когда вы говорите height:800px, он будет занимать высоту просто независимо от детей тела

Теперь, если вы хотите, чтобы ваше тело получило точно такой же размер окна просмотра пользователя вы можете использовать vh и vw единицы CSS

Во-первых, проверьте https://caniuse.com, чтобы узнать, поддерживают ли ваши целевые устройства эти единицы.

тогда вы можете сказать

body{
    width: 100vw;
    height: 100vh;
}

это скажет, что ваш элемент body должен иметь все 100 процентов ширины области просмотра (vw) и высоты области просмотра (vh)

УВЕДОМЛЕНИЕ:

background-size: contain;

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

так что возможно, что некоторые места вашего элемента тела окажутся белыми и не получат фон (если соотношение сторон вашего изображения отличается от соотношения сторон тела)

если вы хотите, чтобы весь HTML-код вашего тела был покрыт вашим изображением, вы должны использовать

background-size:cover

вместо contain это может обрезать ваше изображение, как вы упомянули...

так что вам нужно сделать выбор если соотношение сторон вашего изображения важнее, чем целостность вашего изображения, решение — обложка в противном случае (целостность имеет большее значение, чем соотношение сторон) вы можете использовать 100% для размера фона. если важны как целостность, так и соотношение сторон, и это нормально, что какая-то часть тела загружается белым и без фонового изображения, вы сделали лучший выбор, используя contain

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

body {
   background: url("https://raw.githubusercontent.com/htcrefactor/momentum/main/images/apple-iphone-12-pro-max.webp");
   background-size: contain;
   background-color: black;
   height: 800px;
   max-width: 800px
}

Другие вопросы по теме