Cover html: html — Аналог background-size: cover для img

html — Не верно работает background-size:cover

background-size: cover; — не масштабирует изображение под размер экрана по ширине, оно выезжает за края, попробовал уже все что можно было, но мне кажется что я что-то упустил и проблема элементарная.

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(/images/Layer_15.jpg) center no-repeat, url(/images/picture.png) center no-repeat;
  background-size: cover;
}

<div>
  <div>
    <h2>MoGo</h2>
  </div>
</div>

• html
• css

2

Попробуйте добавить в CSS строчку:

body { margin: 0; padding:0; }

body { margin: 0; padding:0; }
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: url(/images/Layer_15.  jpg) center no-repeat, url(/images/picture.png) center no-repeat;
  background-size: cover;
}

<div>
  <div>
    <h2>MoGo</h2>
  </div>
</div>

Если вы хотите растягивать картинку вусмерть, чтобы картинка маштабировалась под размер экрана — пишите background-size: 100% 100%.
Но: background на этом интро не является тем, что пользователь обязательно должен увидеть, это просто элемент декорации, людям не важно видеть орла полностью.

Вот пример с растянутым вусмерть орлом: (Не надо так делать)

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0 10px;
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url(https://i.stack.imgur.com/3i13y.jpg) no-repeat center;
  background-size: 100% 100%;
}

<div>
  <div>
    <h2>MoGo</h2>
  </div>
</div>

А вот background-size: cover, это лучше подходит для этого:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
. container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  padding: 0 10px;
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url(https://i.stack.imgur.com/3i13y.jpg) no-repeat center;
  background-size: cover;
}

<div>
  <div>
    <h2>MoGo</h2>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

object-fit — CSS: каскадные таблицы стилей

Свойство CSS object-fit задает способ изменения размера содержимого заменяемого элемента, например или , на подходит к его контейнеру.

Вы можете изменить выравнивание объекта содержимого замененного элемента в поле элемента, используя свойство object-position .

 подходит для объекта: содержит;
объект подходит: обложка;
объект-подгонка: заполнить;
соответствие объекту: нет;
объект-подгонка: уменьшение масштаба;
/* Глобальные значения */
объект-подгонка: наследовать;
соответствие объекту: начальный;
объект-подгонка: вернуться;
объект-подгонка: обратный слой;
соответствие объекту: не установлено;
 

Свойство object-fit задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

содержат

Заменяемое содержимое масштабируется, чтобы сохранить соотношение сторон и вписаться в поле содержимого элемента. Весь объект заполняет поле, сохраняя при этом его соотношение сторон, поэтому объект будет помещен в «почтовый ящик», если его соотношение сторон не соответствует соотношению сторон поля.

крышка

Размер замененного содержимого соответствует соотношению сторон при заполнении всего поля содержимого элемента. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет обрезан по размеру.

заполнение

Размер замененного содержимого соответствует размеру поля содержимого элемента. Весь объект полностью заполнит поле. Если соотношение сторон объекта не соответствует соотношению сторон его блока, то объект будет растянут до нужного размера.

нет

Размер замененного содержимого не изменяется.

в уменьшенном масштабе

Содержимое имеет размер, как если бы было указано

нет или содержит , в зависимости от того, что приведет к меньшему размеру конкретного объекта.

Исходное значение	заполнение
Относится к	замененные элементы
Унаследовано	нет
Расчетное значение	как указано
Тип анимации	дискретный

 подгонка объекта = 
  заполнение | 
 содержат | 
 крышка | 
 нет | 
 уменьшение масштаба 

Установка соответствия объекта для изображения

HTML

 

   
соответствие объекта: заливка
 
  
  
   
соответствует объекту: содержит
 
  
  
   
object-fit: обложка
 
   png" alt="Логотип MDN" />
  
   
соответствие объекту: нет
 
  
   
   
объектное соответствие: уменьшение
 
  
  

 

CSS

 h3 {
  семейство шрифтов: Courier New, моноширинный;
  размер шрифта: 1em;
  поле: 1эм 0 0,3эм;
}
картинка {
  ширина: 150 пикселей;
  высота: 100 пикселей;
  граница: 1px сплошная #000;
  поле: 10px 0;
}
.узкий {
  ширина: 100 пикселей;
  высота: 150 пикселей;
}
.наполнять {
  объект-подгонка: заполнить;
}
.содержать {
  подходит для объекта: содержит;
}
.крышка {
  объект подходит: обложка;
}
.никто {
  соответствие объекту: нет;
}
.уменьшать {
  объект-подгонка: уменьшение масштаба;
}
 

Результат

Спецификация
Модуль изображений CSS Уровень 3 # the-object-fit

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

• Другие свойства CSS, связанные с изображением: object-position , image-orientation , image-rendering , image-resolution .
• размер фона

Обнаружили проблему с содержанием этой страницы?

• Отредактируйте страницу на GitHub.
• Сообщить о проблеме с содержимым.
• Просмотрите исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

html — Не удается заставить элемент покрыть всю страницу

спросил 3 года 5 месяцев назад

Изменено 3 года, 5 месяцев назад

Просмотрено 4к раз

Здесь цель состоит в том, чтобы боковая панель занимала всю высоту страницы. Прямо сейчас #side вообще не имеет установленного свойства высоты, и оно охватывает весь элемент тела, как хотелось бы (когда я установил высоту на 100%, он не охватывал весь элемент тела… пойди разберись). Таким образом, проблема заключается в том, что родительский элемент #side, body, не охватывает всю страницу.

Я перепробовал (как мне кажется) миллион различных вариантов высоты как для элемента HTML, так и для элемента body, но ничего не сработало. Как видно на картинке ниже, это максимально близко к элементу body, охватывающему всю высоту страницы.

Пара вещей:

• У меня есть фиксированное фоновое изображение, которое покрывает всю страницу. Я не уверен, имеет ли это какое-либо отношение к моей проблеме.
• Элемент HTML имеет тот же размер, что и элемент body, выделенный на изображении ниже
• Я попытался установить свойства min-height и height для body и HTML на 100%, а также 100vh и 120vh.
• Ни в теле, ни в HTML нет полей или отступов.
• Я нашел похожие вопросы, но ни одно из решений не решило мою проблему.

Вот что у меня есть на данный момент:

 html, body {
    маржа: 0;
    заполнение: 0;
    минимальная высота: 100%;
    /* Я также пробовал height: 100%; */
}
тело {
    дисплей: гибкий;
}
# сторона, # заголовок-контент {
    /* высота не указана, потому что я обнаружил, что это каким-то образом сделало элементы div короче? */
    дисплей: гибкий;
}
 

Тело содержит два элемента div: #side и #header-and-content. Я не уверен, что flexbox имеет к этому какое-то отношение… Дополнительный CSS, где я устанавливаю фоновое изображение элемента body, можно увидеть в правом нижнем углу прикрепленного изображения. Пожалуйста, дайте мне знать, если есть какой-либо другой соответствующий код, который я должен опубликовать! Спасибо! 🙂

РЕДАКТИРОВАТЬ: HTML находится в нескольких разных файлах, поэтому вот скриншот из браузера (да, мне, вероятно, не нужно подвергать цензуре пути к файлам, но я нахожусь на сервере на работе, и я постоянно параноик, да ладно )

Вот весь соответствующий CSS на скриншоте, потому что я спешу:

ОБНОВЛЕНИЕ: единственное, что мне помогло, это прокомментировать ВСЕ и добавить элементы и стили обратно один за другим. . Я даже не могу сказать вам, в чем заключалась последняя проблема.

• HTML
• CSS

7

Придайте стилю элементу Body, установив значения его свойств margin и padding равными 0, а для свойства height установите значение 100vh.

 корпус{
 высота: 100вх;
 маржа: 0;
 заполнение 0;
}
 

Наконец, настройте свой Body-Tag с высотой 100vh, чтобы таким образом установить размер области просмотра

 body {
  поле: 0px;
  отступ: 0px;
  высота: 100вх;
}
 

Не применять универсальный селектор (*). Это приведет к выбору других элементов, имеющих те же значения свойств, что и тело, и это полностью испортит ваш код.

1

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

 тело {
  поле: 0px;
  отступ: 0px;
  высота: 100вх;
}
 

Если у вас по-прежнему возникают проблемы, вам необходимо еще раз проверить и убедиться, что причиной проблемы является не используемое вами устройство/монитор. Загрузите страницу через второе устройство и посмотрите, получите ли вы тот же результат. Если у вас нет другого устройства, используйте эмулятор Mozilla Dev-Edition Firefox для тестирования сайта. Если вы все еще сталкиваетесь с проблемой, я обнаружил, что на данный момент основным нарушителем являются границы. Границы создают угрозу того, что тело вашей страницы немного сместится, потому что они охватывают внешнюю часть элемента. Вот пример, чтобы показать вам, что я пытаюсь сказать:

• Если вы установите блок div на 100% и закроете границу, установленную на…

 граница: 1px сплошная #111;
 

вокруг него, ваш div фактически будет равен (100% + 2px). Это приведет к тому, что тело будет отображаться на пару пикселей меньше. В зависимости от вашего браузера, поскольку разные браузеры работают по-разному, он может отображаться как слева, так и справа. Так что проверьте свои границы, возможно, попробуйте временно удалить их. Следующая проверка поля. Поля являются серьезным препятствием, когда дело доходит до таких проблем, как ваша, они могут привести к смещению страницы влево или вправо, особенно если ширина элемента уже составляет 100%. Наконец, проверьте все элементы, для ширины которых задано значение auto. Даже если вы не установите для ширины элементов значение auto, для многих элементов по умолчанию установлено значение auto. Когда элемент автоматически увеличивается, он потенциально может стать достаточно большим, чтобы немного сдвинуть экран.

Наконец, если вы отчаялись, в крайнем случае вы можете удалить все элементы и добавить их обратно на страницу 1 за 1, пока не найдете виновника. Если вы не можете решить ее, я предлагаю использовать этот подход, так как он поможет вам изучить проблему и получить более глубокое понимание проблемы.
— УДАЧИ —AFT3RL1F3

Замените min-height одним из следующих:

 height: 100%;
высота: 100вх;
 

В остальном все хорошо.

Я добавил фоновое изображение с помощью CSS и размер фона , чтобы покрыть весь экран. Я создал пример, надеюсь, он поможет.

 корпус{
дисплей: гибкий;
background: url("https://drive.google.com/uc?id=1rfyCzcFPIQWylTF1nojkExMLvuogMmKU") исправлен центр без повторов;
  размер фона: обложка;
  высота: 100%;
  переполнение: скрыто;
}

.header-content{дисплей:flex; } 

 
<голова>


<тело>

  <дел>
    
Lorem Ipsum – это просто текст-пустышка, созданный для печати и набора текста. Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным. 
    
    
Он был популяризирован в 1960-е годы с выпуском листов Letraset, содержащих отрывки Lorem Ipsum, а совсем недавно - с программным обеспечением для настольных издательских систем, таким как Aldus PageMaker, включая версии Lorem Ipsum.