带图像的 CSS 100% 高度列答案

【问题标题】：CSS 100% Height Column with Image带图像的 CSS 100% 高度列
【发布时间】：2015-10-31 00:14:24
【问题描述】：

我一直在尝试一些技术，但我遇到了这个问题。我想在一个部分中做整个 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" 以使缩放工作，但无论哪种方式，我都无法匹配列高。

最接近的解决方案是使用display:table，但我不喜欢在不更改 HTML 的情况下无法更改图像在哪一侧。使用我目前基于float 的设计，我可以将图像放置与不同的类（例如上面的left-image）交换。

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

我读过一些关于使用相对/绝对定位的文章，但我可以让它工作的唯一方法是为容器设置一个固定的高度。这对我不起作用：http://jsfiddle.net/qLa4g7fL/1/

编辑：澄清一下，我希望图像填满整个空间（33% 宽度乘 100% 高度）。我希望它会根据需要进行裁剪。

这是一个应该是什么样子的示例（只是一个快速的想法）

【问题讨论】：

标签： html css height

【解决方案1】：

在.page-section.image-third .image-wrapper img 中将min-width: 100% 更改为max-width:100%

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

【讨论】：

如上所述，这是：“那么您的图像包装器可能没有完整的高度，但会阻止您的图像溢出。”正是我想要避免的。我想要全高的图像，裁剪是可以接受的。

【解决方案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/

【讨论】：

不，这与我想要的相反。我希望图像填充空间，即使它必须被裁剪。它应该填充包含文本的 div 高度的 100%，并且应该是该部分宽度的 33%。

【解决方案3】：

有一个新的惊人的 CSS 属性，称为 object-fit！

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

你会坠入爱河的！

【讨论】：