Question

我正在处理需要两个相等高度列的布局。左列包含img（未知大小），右列包含文本。我希望img填充其容器，并希望避免使用flexbox（必须支持旧浏览器）或js（如果可能）。

<div class="table">
  <div class="cell">
    <img src="http://placekitten.com/500/500" alt="" />
  </div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorem deserunt vero atque fugit autem necessitatibus iure numquam veritatis nostrum!</div>
</div>

我已经能够通过将img设置为背景来完成这项工作，但我想知道是否有人知道如何使用html中的img来完成这项工作。到目前为止，这就是我所拥有的（scss）：

.table {
  display: table;
  width: 50%;
  background: blue;
}

.cell {
  display: table-cell;
  width: 50%;
  background: red;
  &:first-of-type {
    background: green;
  }
}

这适用于两列文本，但是当你包含img时它不会。还有一种方法可以使用普通的css来完成这项工作吗？

工作示例（仅包含文字）：http://codepen.io/anon/pen/vmtEg/

工作（当img不像包含它的列那样宽时）：http://codepen.io/anon/pen/pgIzC/

不工作（img小于容器）：http://codepen.io/anon/pen/wmIri/（几乎在那里，我觉得我需要的是一个容器，将图像拉到全高，然后切断x溢出。不知道怎么去那里。）

Answer 1

不确定是否要修复列高，但您可以看到下面的代码：

<table>

http://placekitten44.com/500/500

<td width="50%">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus dolorem deserunt vero atque fugit autem necessitatibus iure numquam veritatis nostrum!</td>

Answer 2

您在<img src=''>中指定的图片不是背景图片，而是img元素的前景图片内容，因此不会对CSS背景样式做出反应。

您可以将CSS中的背景图像设置为正常，如DEMO

.image {
  background:url("http://placekitten.com/500/500")no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 }

或者你需要javascript / jquery

Answer 3

尝试jquery。只需将 col 类添加到您想要相同调整大小的div

var maxheight = 0;
$("div.col").each(function(){
  if($(this).height() > maxheight) { maxheight = $(this).height(); }
});

$("div.col").height(maxheight);

告诉我一些事情！

Answer 4

由于您不想为表格设置高度，因此唯一的CSS解决方案是添加（因此您的图像会在其容器中调整大小）：

.cell img{
    width:100%;
    height:auto;
    display:block;
}

<强> FIDDLE

完整的CSS：

.table {
    display: table;
    width: 50%;
    background: blue;
}
.cell {
    display: table-cell;
    vertical-align:middle;
    width: 50%;
    background: red;
}
.cell img{
    width:100%;
    height:auto;
    display:block;

}
.cell:first-of-type {
    background: green;
}

动态相等高度列，包含文本和全高<img/>

4 个答案: