两个相等的列，图像从右侧裁剪 - CSS

Question

我正在创建一个两列等宽的部分，使用它在左列/部分中有一个图像，我想在屏幕调整大小时从右侧裁剪。

如果右列文本中的文本最终大于图像大小，我想修复图像的高度（在左侧），以及拉伸元素（并保持背景颜色）。

我已经尝试过“普通”css 以及带有拉伸和 flex-grow 的 flexbox，但我无法让它工作。

我不知道如何让 a) 尺寸正常工作或 b) 让它从侧面裁剪

<div class="section">
 <div class="image">
   <img src="http://xxx.jpg">
  </div>
  <div class="text">
   text_abc
  </div>
</div>

这不起作用：

.section {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: centre;
}

.image {
  background-color: #f9f6ec;
   width: 428px;
   flex-grow: 1;
 }

 .text {
   font-size: 1.25em;
   padding: 31px;
   background-color: #f9f6ec;
   flex-grow: 1;
 }

也没有：

.section {
  height: 100%;
}

.image {
  background-color: #f9f6ec;
  width: 50%;
  float: left;
}

.text {
  font-size: 1.25em;
  padding: 31px;
  background-color: #f9f6ec;
  width: 50%;
  float: right;
}

Answer 1

据我从你的问题中了解到，你想要这样的东西：

.section
{
  display: flex;
  width: 500px;
  height: 500px;
  border: 1px dotted black;
}

.image
{
  flex: 1;
  background-color: #f9f6ec;
  background-image: url('http://lorempixel.com/image_output/nightlife-q-c-640-480-5.jpg');
  background-position: center center;
}

.text
{
  flex: 1;
   font-size: 1.25em;
   background-color: #f9f6ec;
}

<div class="section">
 <div class="image"></div>
  <div class="text">
   text_abc
  </div>
</div>

您可以使用background-size 和background-position 任意裁剪图像