Есть код (смотреть в полном окне)
Как мне сделать так, что когда слева текста много, картинка ресайзилась под блок хотя бы до 400px?
.feature {
position: relative;
box-sizing: border-box;
word-wrap: break-word;
hyphens: auto;
padding: 40px 10% 40px;
color: #fff;
text-transform: uppercase;
background-color: #F5A9F2;
}
@media(min-width: 768px) {
.feature {
padding: 45px 5% 45px;
width: calc(100%/3);
}
}
.feature__title {
margin: 0;
margin-bottom: 14px;
padding: 0;
font-weight: 700;
font-size: 18px;
line-height: 26px;
text-align: center;
}
@media(min-width: 768px) {
.feature__title {
max-width: 135px;
margin-left: auto;
margin-right: auto;
}
}
.feature__number {
margin: 0;
margin-bottom: 16px;
padding: 0;
font-weight: 400;
font-size: 14px;
line-height: 21px;
text-align: center;
}
.feature__content {
margin: 0;
padding: 0;
font-weight: 400;
font-size: 14px;
line-height: 21px;
text-align: center;
}
.features-row {
font-size: 0;
line-height: 0;
}
@media(min-width: 768px) {
.features-row--with-image-left, .features-row--with-image-right {
background-color: #F5A9F2;
}
.features-row--with-image-left .feature {
float: right;
}
.features-row--with-image-left .features-row__container {
float: left;
}
.features-row--with-image-right .feature {
float: left;
}
.features-row--with-image-right .features-row__container {
float: right;
}
}
.features-picture {
overflow: hidden;
height: 256px;
}
.features-picture__image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
min-height: 256px;
}
@media(min-width: 1000px) {
.features-picture__image {
transform: translateY(-20%);
}
}
@media(min-width: 768px) {
.features-picture__image {
width: 100%;
}
}
figure {
margin: 0;
}
<div class="features-row features-row--with-image-right clearfix">
<section class="feature feature--top-line feature--blue">
<h2 class="feature__title">Lorem Ipsum</h2>
<p class="feature__number">- №1 -</p>
<p class="feature__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque esse, accusamus maiores reprehenderit placeat pariatur consectetur ad libero ut, aliquam unde distinctio nemo aliquid, molestiae quidem ullam reiciendis, ipsum assumenda?</p>
</section>
<figure class="features-picture">
<picture>
<source media="(min-width: 768px)" srcset="http://placehold.it/800x400 1x">
<img src="img/[email protected]" srcset="http://placehold.it/800x400 2x" alt="Город" class="features-picture__image">
</picture>
</figure>
</div>