0

Скриншот

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 class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

2
  • Используйте background-size: contain; чтобы сохранять пропорции, либо background-size: 100% 100%; чтобы все вмещалось и по высоте и по ширине (но без пропорций).
    – SVE
    21 ноя 2020 в 12:38
  • cover не масштабирует элемент под размер экрана, как вы хотите 21 ноя 2020 в 17:45

2 ответа 2

0

Попробуйте добавить в 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 class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

0

Если вы хотите растягивать картинку вусмерть, чтобы картинка маштабировалась под размер экрана - пишите 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 class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </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 class="intro">
  <div class="container">
    <h1>MoGo</h1>
  </div>
</div>

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.