Можно ли заставить картинку растягиватся в высоту вместе с ее родителем?

Question

Проблема заключается в том, что мне нужно заставить растягиваться картинку вместе с контентом, который стоит рядом.

Но выходит вот так:

.section3{
background-color: #ffc155;
}
.section3__container{
  min-width: 1903px;
  height: 100%;
}
.section3__back__wrapper{
  /* background-image: url(images/back.png);
  background-size: cover; */
  width: 44%;
  height: 100%;
  display: inline-block;
  vertical-align: top;  
}
.section3__back{
  display: block;
  height: 100%;
  width: 100%;
}
.section3__block{
  width: 523px;
  display: inline-block;
  vertical-align: top;
  margin-top: 164px;
  margin-left: 81px;
  padding-bottom: 20px;
}
.section3__title{
color: #ffffff;
font-family: "Gotham", sans-serif;
font-size: 30px;
font-weight: 900;
line-height: 22px;
text-transform: uppercase;
letter-spacing: -0.75px;
margin-bottom: 28px;
}
.section3__text{
color: #ffffff;
font-family: "Open Sans";
font-size: 13px;
font-weight: 400;
line-height: 24px;
margin-bottom: 50px;
}
.section3__button{
width: 145px;
height: 46px;
border: 1px solid #e7ad48;
background-color: #ffc155;
text-align: center;
}
.section3__button__link{
color: #ffffff;
font-family: "Gotham", sans-serif;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
line-height: 46px;
display: block;
}
.section3__block__wrapper{
  display: inline-block;
  width: 55%;
}

<section class="section3">
            <div class="section3__container container">
                <div class="section3__back__wrapper">
                    <img src="https://cdn1.savepice.ru/uploads/2020/2/11/c3d2957b7c6360384f7331f01cbf7e2e-full.png" alt="not found" class="section3__back">
                </div><!--
             --><div class="section3__block__wrapper">
                    <div class="section3__block">
                        <h2 class="section3__title">About us</h2>
                        <p class="section3__text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has survived not
                        only five centuries, but also the leap into electronic typesetting, remaining essentially
                        unchanged. It was popularised in the ore recently with desktop publishing software like Aldus
                        PageMaker including versions of Lorem Ipsum</p>
                        <div class="section3__button"><a href="#" class="section3__button__link">Read More</a></div>
                    </div>
                </div>
            </div>
        </section>

Answer 1

Проверь этот код для css Я убрал немного лишнего и применил для 2-х блоков display:flex Почитай поподробнее про Flexbox, мне очень помогает

<style type="text/css">
    .section3{
background-color: #ffc155;
}

.container
{display: flex;}

.section3__title{
color: #ffffff;
font-family: "Gotham", sans-serif;
font-size: 30px;
font-weight: 900;
line-height: 22px;
text-transform: uppercase;
letter-spacing: -0.75px;
margin-bottom: 28px;
}
.section3__text{
color: #ffffff;
font-family: "Open Sans";
font-size: 13px;
font-weight: 400;
line-height: 24px;
margin-bottom: 50px;
}
.section3__button{
width: 145px;
height: 46px;
border: 1px solid #e7ad48;
background-color: #ffc155;
text-align: center;
}
.section3__button__link{
color: #ffffff;
font-family: "Gotham", sans-serif;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
line-height: 46px;

}

</style>

БЛОГ НА HUSL

Можно ли заставить картинку растягиватся в высоту вместе с ее родителем?

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