0

наглядный пример

мне нужно чтобы фотография была на 100% ширину, в то время как контент умещался, допустим в 90% ширины. как верстать такие случаи?

1 ответ 1

0

Обычно это фоновая картинка родительского блока (типа section или main), который имеет ширину 100%. А внутри него есть дочерний блок (типа .container), который меньше ширины родителя, и в нём уже находится весь контент:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
main {
  background-image: url(https://cdn.pixabay.com/photo/2018/05/13/08/07/ocean-3395598_1280.jpg);
  background-size: cover;
}
.container {
  max-width: 90%;
  margin: 0 auto;
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  padding: 30px 15px;
}
<main>
  <div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Ipsum consectetur, iusto quo exercitationem ea alias accusantium possimus consequatur repellat error nulla labore, <br>porro qui! Assumenda ullam deserunt, ratione nostrum cupiditate.
  </div>
</main>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Ipsum consectetur, iusto quo exercitationem ea alias accusantium possimus consequatur repellat error nulla labore, <br>porro qui! Assumenda ullam deserunt, ratione nostrum cupiditate.</div>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Ipsum consectetur, iusto quo exercitationem ea alias accusantium possimus consequatur repellat error nulla labore, <br>porro qui! Assumenda ullam deserunt, ratione nostrum cupiditate.</div>

1

Ваш ответ

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

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