Необходимо сверстать блок и в тоже время растянуть левую картинку на всю ширину от центра(50%) и также текст в рамках сетки. Как это правильно сделать? Я подумывал сделать на флексах фоны в блоке по отдельность и блок с текстом и кнопкой сверху но не уверен что это правильный способ. На нашел к сожеленью похожего ответа в инете. Буду очень блогодарен. Прикладываю скрин с макета.
1 ответ
в таком духе:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
display: block;
object-fit: cover;
width: 100%;
height: 100%;
}
.foo {
max-width: 1200px;
margin: 0 auto;
background-color: orange;
}
.container {
display: flex;
align-items: center;
margin: 0 -20px;
}
.container-item {
padding: 0 20px;
width: 50%;
}
<div class="foo">
<div class="container">
<div class="container-item">
<img src="https://picsum.photos/800/800" alt="#">
</div>
<div class="container-item">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis aut facilis aspernatur, cum architecto cupiditate. Mollitia ab magni fuga aperiam.</p>
<button>Click me</button>
</div>
</div>
</div>
-
Спасибо за отзывчивость! Может я неправильно выразился но проблема именно в фонах, то есть текст придерживается сетки а картинка и желтый фон покрывают экран на 100%(Резиновые), как это реализовать?– VictorLCommented 10 сент. 2020 в 14:11
-
я бы ставил максимальную ширину 100% и min-width ибо на мобилках все ломается– GGOCommented 10 сент. 2020 в 14:35
-
Извините что тяну время, я об отображений на пк, не об адаптивность(это конечно тоже важно), вот макет prntscr.com/ueznm1 нужно сделать ровно также но не получаеться тк фон разделен на две картинки которые растянуты от центра экрана, глупый вопрос но большего опыта нету покачто..– VictorLCommented 10 сент. 2020 в 14:47
-
@VictorL, выложите пример того, что вы сделали, а-то ничего не понятно– meineCommented 10 сент. 2020 в 14:54
-
1