调整图像大小以适合<td>或div

apkdsmith 发表于 Dev

阿普史密斯

我要创建以下布局：

其中蓝色块是图像，红色和绿色块包含垂直居中的文本。容器需要具有position:fixed，图像的大小是动态调整的，以使其高度设置为容器的高度，红色和绿色框的高度相等，并水平填充容器的其余部分。

我最初尝试使用div：

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  background-color: red;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  background-color: yellow;
  text-align: right;
  display: table;
  table-layout: fixed;
  float: right;
}
.row1 {
  height: 50%;
  width: 100%;
  display: table-row;
}
.row2 {
  height: 50%;
  background-color: blue;
  display: table-row;
}
span {
  display: table-cell;
  vertical-align: middle;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

这对于图像来说效果很好，但是我无法弄清楚如何使红色和绿色的div令人满意地填充剩余的宽度。

我的第二次尝试是基于表的，但是同样，我似乎无法正确设置宽度：

body {
  background-color: red;
  padding: 0;
  border: 0;
  margin: 0;
}
div {
  background-color: yellow;
  height: 15vh;
  width: 100vw;
  position: fixed;
}
table {
  height: 100%;
  width: 100%;
  background-color: blue;
  border-collapse: collapse;
  table-layout: fixed;
}
tbody {
  height: 100%;
  width: 100%;
  background-color: purple;
}
tr {
  height: 50%;
  width: 100%;
  background-color: green;
  padding: 0;
}
tr:last-child {
  background-color: yellow;
}
td {
  height: 100%;
  padding: 0;
  white-space: nowrap;
}
td:last-child {
  max-width: 100%;
}
img {
  max-height: 100%;
  display: block;
}

<div>
  <table>
    <tbody>
      <tr>
        <td rowspan="2">
          <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </td>
      </tr>
      <tr>
        <td>
          More text.
        </td>
      </tr>
    </tbody>
  </table>
</div>

我也遇到了问题，无论内容如何，确保红色和绿色部分都保持在总高度的50％。

我怎样才能使它们工作？还是有一种完全不同的方法可以起作用？

小恶魔

您没有说您的目标市场是什么，但是由于在我的大多数工作中，我只需要担心最新的浏览器版本，此答案将利用新的CSS flexbox。如果您需要与旧版浏览器兼容，请参见下面的第二组代码。

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.imgContainer {
  height: 100%;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
  width: 100%;
}
.row1 {
  background-color: red;
}
.row2 {
  background-color: green;
}
.row1,
.row2 {
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

以下是在旧版浏览器中可以使用的解决方案，但IE9和以下版本的浏览器无法正确将文本垂直居中。如果这是一个问题，您也许可以在此页面上找到有效的方法，但是由于您不了解所有限制，因此我无法选择正确的解决方案。

body {
  padding: 0;
  margin: 0;
  border: 0;
}
.container {
  height: 15vh;
  width: 100vw;
  position: fixed;
}
.imgContainer {
  height: 100%;
  float: left;
}
.imgContainer img {
  height: 100%;
}
.textContainer {
  height: 100%;
}
.row1 {
  height: 50%;
  background-color: red;
}
.row2 {
  height: 50%;
  background-color: green;
}
span {
  right: 0;  /* right-justify */
}
.row1 > span {
  position: absolute;
  top: 25%;  /* put the top 25% down within .container - the first non-static ancestor element */
  transform: translateY(-50%);  /* nudge the line up half it's height */
}
.row2 > span {
  position: absolute;
  top: 75%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="imgContainer">
    <img src="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png" />
  </div>
  <div class="textContainer">
    <div class="row1">
      <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
    </div>
    <div class="row2">
      <span>More text.</span>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。