调整使用 CSS 的大小不起作用

Question

您好，我正在努力实现理想的外观：

How it should look

但是，当文本变长或调整屏幕大小时，可能会导致：

How it looks with more text

任何帮助都将不胜感激，因为我已经花了几个小时试图让它工作......响应很容易，因为它会出现在文本下方而不是并排显示，但桌面预览简直让我丧命！

HTML：

<div class="container-combo white">
        <div class="row-2col-equal-ignore image-combo">
                <div class="column">
                <div class="content">
                <h2>Located at the heart of our community to serve our community</h2>
                <img src="images/bkg-swirl.png" alt="swirl divider" class="swirl">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                </div>
                <div class="column">
                <img src="images/bedroom-combo.jpg" class="combo-img">
                </div>
        </div>
</div>

SCSS/CSS：

.image-combo {

.column {
margin-bottom: -5px;

    .content {
        margin: 0 auto;
        text-align: center;
        max-width: 705px;
        padding-top: 61px;
        padding: 61px 10px 10px;

        h2 {
            color: $dark-grey;
            font-size: 34px;
            font-family: $minion;
            line-height: 40px;
            font-weight: normal;
            text-transform: none;
            padding-bottom: 32px;
        }

        p {
            font-size: 15px;
            line-height: 24px;
            text-align: left;
            padding-bottom: 32px;
        }

        .swirl {
            float: none;
            max-width: 456px;
            width: 100%;
            min-width: 1px;
        }
    }

    .flip {
        padding-right: 120px;
        padding-left: 40px;
    }

    .combo-img {
        width: 100%;
        min-height: 426px;
        height: 100%;
    }
}

Answer 1

如果您像这样使用background-image 和background-size: cover，它将起作用

.image-combo {
  display: flex;
}

.column {
  margin-bottom: -5px;
}

.content {
  margin: 0 auto;
  text-align: center;
  max-width: 705px;
  padding-top: 61px;
  padding: 61px 10px 10px;
}

h2 {
  color: $dark-grey;
  font-size: 34px;
  font-family: $minion;
  line-height: 40px;
  font-weight: normal;
  text-transform: none;
  padding-bottom: 32px;
}

p {
  font-size: 15px;
  line-height: 24px;
  text-align: left;
  padding-bottom: 32px;
}

.swirl {
  float: none;
  max-width: 456px;
  width: 100%;
  min-width: 1px;
}

.flip {
  padding-right: 120px;
  padding-left: 40px;
}
.column {
  flex: 1;
  width: 50%;
}
.column.img {
  background-image: url(http://lorempixel.com/500/500/people/10/);
  background-size: cover;
}

<div class="container-combo white">
  <div class="row-2col-equal-ignore image-combo">
    <div class="column">
      <div class="content">
        <h2>Located at the heart of our community to serve our community</h2>
        <img src="http://placehold.it/200x20" alt="swirl divider" class="swirl">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
    <div class="column img">
    </div>
  </div>
</div>