Как вытянуть картинку и текстовый блок за границы контейнера используя только HTML и CSS

Question

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

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

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

Answer 1

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

     <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>

Answer 2

<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%;

    }
  }
}

БЛОГ НА HUSL

Как вытянуть картинку и текстовый блок за границы контейнера используя только HTML и CSS

Ответы (2 шт):