0

Есть код (смотреть в полном окне)

Как мне сделать так, что когда слева текста много, картинка ресайзилась под блок хотя бы до 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/photo-city@1x.jpg" srcset="http://placehold.it/800x400 2x" alt="Город" class="features-picture__image">
    </picture>
  </figure>
</div>

1
  • Скорее всего никто не понял вопрос... что именно должно произойти?
    – NeedH8
    20 дек 2015 в 14:11

1 ответ 1

1

Если вы хотите выровнять блоки во высоте, то можно через position: absolute;. Но при этом есть 2 нюанса:

  1. Нужно указывать явно и дублировать ширину блока с текстом
  2. Ширина картинки будет динамической

.wrapper {
  position: relative;
  display: block;
}
p {
  width: 200px;
  border: 1px solid red;
}
.img-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 200px;
  /* смещение равно ширине блока */
  overflow: hidden;
  border: 1px solid green;
}
.img-wrapper img {
  height: 100%;
  /* будет плавающяя ширина */
}
<div class="wrapper">
  <p>
    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>
  <div class="img-wrapper">
    <img src="http://placehold.it/300x300" />
  </div>
</div>

<div class="wrapper">
  <p>
    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? 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>
  <div class="img-wrapper">
    <img src="http://placehold.it/300x300" />
  </div>
</div>

Ваш ответ

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

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