带有图像的CSS 100％高度列

Question

我一直在尝试一些技巧，但我遇到了这个问题。我想在一个部分事物中做整个100％高度的列，但是一列有一个需要缩放以填充一列的图像。

所以我有一列文本（来自WordPress的可变内容），宽度为66％，一列保存图像，宽度为33％。图像可以基于类别在左侧或右侧。

我的HTML：

<section class="page-section color-brand left-image image-third">
    <div class="page-section-mid-wrapper">
        <div class="image-wrapper left-image image-third">
            <img src="img.jpg" alt="">
        </div>
        <div class="page-section-wrapper">
            <div class="page-section-content">
                Variable content here
            </div>
         </div>
    </div>
</section>

大多数CSS技术都可以通过技巧在两列中获得纯色背景色。但在这种情况下，我想要一个缩放的图像。我愿意从img代码转换为内联style="background-image"以使缩放工作正常，但不管怎样，我都无法获得匹配的列高度。< / p>

最接近的解决方案是使用display:table，但我不喜欢在不更改HTML的情况下无法更改图像的哪一方。使用我当前基于float的设计，我可以将图像展示位置替换为另一个类（例如上面的left-image）。

只有花车，这是我到目前为止的一个例子：http://jsfiddle.net/no80ayc2/2/ 您会注意到，当视图较窄时，图像比整个容器高度短。

我已经阅读了一些关于使用相对/绝对定位的内容，但我能够实现这一点的唯一方法是使用固定高度的容器。这不会对我有用：http://jsfiddle.net/qLa4g7fL/1/

编辑：为了澄清，我希望图像填满整个空间（宽度为33％，高度为100％）。而且我希望它会在必要时被裁剪。

这是一个应该如何看待的例子（只是一个简单的想法）

Answer 1

将min-width: 100%更改为max-width:100%

中的.page-section.image-third .image-wrapper img

然后你的图像包装器可能没有完整的高度，但会阻止你的图像溢出。

Answer 2

 You need to change your min-width to max-width,
 Try to look at this link, I just update your code

 http://jsfiddle.net/no80ayc2/7/

Answer 3

有一个新的惊人的css属性叫做object-fit！

https://css-tricks.com/almanac/properties/o/object-fit/

你会坠入爱河！