html - 带图像的 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" 以使缩放正常工作，但无论哪种方式，我都遇到了麻烦让列高匹配。

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

只有花车，这里是我目前所拥有的示例:http://jsfiddle.net/no80ayc2/2/您会注意到，当 View 较窄时，图像会比整个容器的高度短。

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

编辑:澄清一下，我希望图像填满整个空间(33% 宽 x 100% 高)。我希望它能根据需要进行裁剪。

这是一个看起来应该如何的例子(只是一个快速的想法)

Answer 1

更改min-width: 100%进入max-width:100%在 .page-section.image-third .image-wrapper img

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