使用Flexbox

Question

我正在使用Flexbox创建两列布局。一列具有带有彩色背景的简单内容。另一列的图像应覆盖div的整个高度/宽度。

这两列应该都是.content div的高度（根据屏幕大小增长/缩小）。如果.marketing-image img有任何溢出，应将其切掉。我想用CSS / SCSS解决这个问题，请不要使用JavaScript：）

感谢任何帮助！

这是我的代码：https://codepen.io/erbanach/pen/bMdOKM

＆＃13;

＆＃13;

.block-marketing {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
}

.split {
  width: 50%;
}

.left {
  order: 1;
  display: flex;
}

.right {
  order: 2;
  display: flex;
}

.marketing-image {
  flex: 1;
}

.marketing-image img {
  object-fit: cover;
  width: 100%;
}

.content {
  flex: 1;
  padding: 50px;
  background: black;
  color: white;
}

＆＃13;

<div class="block-marketing">
  <div class="split left">
    <div class="marketing-image">
      <img src="http://via.placeholder.com/350x150">
    </div>
  </div>
  <div class="split right">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus odio id magna pharetra iaculis. Praesent faucibus placerat porttitor. Donec dignissim nibh et commodo luctus. Integer dictum ultricies urna ut viverra. Vivamus tempor iaculis
        rutrum. Duis suscipit libero sit amet quam vehicula, sit amet ullamcorper felis commodo. Aliquam eu fringilla lectus, a laoreet nisi. Etiam accumsan ex libero, eget posuere dolor sodales in.</p>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需从align-items: center选择器中移除.block-marketing，然后将height: 100%添加到图片中：

我已经分叉并更新了你的codepen： https://codepen.io/anon/pen/QrbzXz

Answer 2

如果你可以使用网格，只需

int main()
{
    int x = 4, y = 6;
    long z = (long) x + y;

}