как вставить полноэкранное большое фоновое изображение в html, css? - PullRequest
Новая
       5

как вставить полноэкранное большое фоновое изображение в html, css?

1 голос
/ 11 июля 2020

Полное изображение не отображается должным образом, нижняя часть изображения отсутствует, как я могу отобразить полное изображение на экране? (размеры: 5904 * 4000 пикселей)

Я пробовал с подгонкой объекта, но он не работал: 

* {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  height: 100vh;
  background: url("adult-blur.jpg") center center no-repeat;
  background-size: cover;
  overflow: hidden;
  object-fit: cover;
  object-position: bottom top;
}

Я также поделился видео с этой проблемой в facebook: здесь

Ответы [ 2 ]

1 голос
/ 11 июля 2020

Вы не можете иметь оба:

  1. Изображение отображается полностью
  2. Изображение должно покрывать весь фон

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

Возможные варианты:

  1. Всегда используйте изображение в полную ширину, используя width:100%. Это может привести к тому, что часть изображения будет обрезана внизу, если она выше, чем область просмотра, или будет немного белого пространства внизу, если изображение короче области просмотра.
  2. Изображение всегда должно быть заполнено -высота с использованием height: 100%. Это может привести к тому, что часть изображения будет обрезана с правой стороны, если она шире, чем область просмотра, или некоторые пробелы, если она не такая широкая, как область просмотра.
  3. Используйте backgorund-repeat, чтобы изображение повторялось по вертикали или по горизонтали, чтобы закрыть любые пробелы.

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

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

0 голосов
/ 11 июля 2020

Посмотрите этот код: 

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        <style>
            #body-container {
                width: 100%;
                height: 100vh;
                background: url("j.jpg") center center no-repeat;
                background-size: cover;
                overflow-y: scroll;
            }
        </style>
    </head>
    <body>
        <div id="body-container">
            <!-- Place your document contents here -->          
        </div>
    <body>
</html>

Здесь мы использовали bootstrap-4. Поместите все содержимое тела документа в контейнер div. В стилях background-size используется, чтобы сделать наше изображение 100% по ширине и высоте. Если изображение до абсурда растягивается, можно попробовать background-size: cover. Наконец, свойство overflow-y используется для вертикальной прокрутки нашего div

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...