css - 具有 100% 高度图像的流体柱

Question

我正在尝试为我正在处理的网站设置一个流动的栏布局。我想在没有 javascript 的情况下执行此操作，但看起来这最终可能是最简单的选择。无论如何，有人知道如何使用 CSS 完成这项工作吗？

两列都需要填充浏览器高度。左列包含一个纵横比为 2:3 的图像，高度:100% 和宽度:自动，因此左列的宽度将根据浏览器的高度而变化。右边的列需要填充剩余的空间。

我看到一个使用 float:left 和 overflow: hidden 的技巧，效果很好，除了当浏览器窗口调整大小时 div 不能正确地调整自己的大小。

这是一个演示问题的简化 fiddle ，使用下面的 CSS:

.left-column {
    float: left;
}
.left-column img {
    height: 100%;
    display: block;
    width: auto;
}
.right-column {
    box-sizing: border-box;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}
.left-column, .right-column {
    height: 100%;
}

https://jsfiddle.net/v7unnhnc/2/

似乎 .left-column 不会自动调整自身大小。有什么想法吗？

Answer 1

基本上你的代码工作正常。您可以将 display:inline-block 添加到您的左栏，您将看到 img 容器在垂直调整大小时进行调整，但是这次文本不会正常流动。

问题(如果有问题的话)是你的容器的宽度(左边那个)..那个有你的width:auto的(你真的不需要把它添加到你的css 作为你的图像将在 overflow hidden 时设置容器的宽度.. 当 float 时)即使你在视觉上可以看到它，也不会在不重新加载页面的情况下理解 img 的大小调整。

但重要的是要知道，如今许多网络开发人员过于专注于(恕我直言)在调整窗口大小时进行响应式设计，而目标并非如此。主要目标是让您的网站适应您的用户(或 future 用户)在加载您的网站时拥有的任何窗口大小。而您的代码恰恰符合这一点。

只有像我们这样的人可能会进入网络并开始手动调整窗口大小以检查响应能力……即便如此，我们中的大多数人也只是检查它在 x 轴上调整大小。

当调整窗口(y 轴)大小时，您必须让别人注意到您的网络无法正常工作的机会是......好吧，我希望你有这么多人注意到。这意味着您有很多访客。