0

введите сюда описание изображения

B HTML код должен выглядеть следующим образом

<div class="section">
    <div class="container">
        <div class="image"></div>
        <div class="text-box"></div>
    </div>
</div>

И с помощью css вытянуть картинку за контейнер, так что бы она принимала ширину и высоту блока родителя

11
  • покажите скрин с версткой (через f12), чтобы было видно блок, в который вы хотите вписать картинку 27 фев 2020 в 11:20
  • В чем сакральный смысл нарушения стандартов верстки? Что мешает просто построить правильную последовательность блоков? + к коменту MaximLensky 27 фев 2020 в 11:28
  • imgur.com/DTqlW4D (блок с вёрсткой). Контейнер нужен для следующего, если вы посмотрите картинку в посте, это макет, линиями обозначен контейнер. И весть контент в правом блоке должен быть в этом контейнере, но только в пределах блока, не залазить на картинку 27 фев 2020 в 11:37
  • в вашей же верстке задайте классу image ширину 50% и классу .text-box тоже. от контейнера вообще можно избиваться, если он не несет реальной структурной логики в себе 27 фев 2020 в 11:40
  • @MaximLensky, я понимаю, в этом и суть вопроса, я два блока помещаю в контейнер, который ограничен по ширине и отцентрирован, и мне нужно картинку вытащить за границы контейнера и сделать что бы она занимала 50% ширины экрана, т.е. 50vw 27 фев 2020 в 11:41

2 ответа 2

0

К контейнеру добавьте ваши стили центровки

     <div class="section">

        <div class="image"></div>

        <div class="text-box"></div>


        <div class='container'>
            некий текст
        </div>
</div>

<style type="text/css">
.image{
width:50%;
display:inline-block;
}

.text-box{
width:50%;
display:inline-block;
padding-right:20%;
background-color: orange;    
}

.container{
    padding-left: 60%;
    padding-top:10%;
    padding-bottom: 10%;
}

</style>
0
<div class="about-us">
        <div class="container">
            <div class="image"><img src="images/about-us-bg.jpg" alt="School items"></div>
            <div class="text-box">
                <h2>ABout us</h2>
                <p>Lorem Ipsum </p>
            </div>
        </div>
    </div>

Задаём следующие стили

.about-us {
  background: #ffc155;

  .container {
    display: flex;
    justify-content: flex-end;

    .image {
      flex-basis: 50vw;
      min-width: 50vw;

      img {
        display: block;
        height: 100%;
        width: 100%;
        object-fit: cover;
      }
    }

    .text-box {
      flex-basis: 50%;
      min-width: 50%;

    }
  }
}
3
  • Смотри в общем: codepen.io/topicstarter/pen/GRJmJrB если что не ясно спроси - я помогу 27 фев 2020 в 12:39
  • @MaximLensky, посмотри мой код, я в ответ прикрепил, всё работает, ты поймёшь как я хотел сделать) 27 фев 2020 в 12:41
  • я же предлогал это уже ... 27 фев 2020 в 12:41

Ваш ответ

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

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