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

Question

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

我想固定图像的高度(在左侧)，并在右列文本中的文本最终高于图像大小时拉伸(stretch)元素(并保持背景颜色)。

我已经尝试过“普通”css 以及带有 stretch 和 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 随意裁剪图像