向左浮动图像，适合父级，保持纵横比答案

【问题标题】：Float image left, fit parent, keep aspect ratio向左浮动图像，适合父级，保持纵横比
【发布时间】：2016-09-14 16:54:04
【问题描述】：

我有以下内容：jsfiddle.net

我想要做的是让图像在文本左侧浮动，以填充父级 (.box)。请注意，.box 的高度可能因文本行数而异。

最终结果应如下所示：

如何做到这一点？

.box {
  position: relative;
  display: block;
  width: 600px;
  padding: 24px;
  margin-bottom: 24px;
  border: 2px solid red;
}
.img {
  float: left;
}
.text {
  font-size: 14px;
}

<div class="box">
  <div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
  <div class="text">This box is one line.</div>
</div>

<div class="box">
  <div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
  <div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

您可以在父元素上使用display: table，在子元素上使用display: table-cell。

PLUNKER

片段

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
    }
    figure {
      display: table;
      width: 600px;
      height: auto;
      margin-bottom: 24px;
      border: 2px solid red;
    }
    img {
      float: left;
      display: table-cell;
      min-height: 100%;
      margin-right: 20px;
    }
    figcaption {
      font-size: 14px;
      height: 100%;
    }
  </style>
</head>

<body>
  <figure>
    <img src="http://i.imgur.com/MhHgEb1.png">
    <figcaption>This box is one line.</figcaption>
  </figure>

  <figure>
    <img src="http://i.imgur.com/MhHgEb1.png">
    <figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
  </figure>
</body>

</html>

【讨论】：

使用表格布局的好主意！但是仍然存在图像未按 OP 要求缩放的问题。它只是以原始尺寸输出图像。
响应式？我错过了那部分。因为容器的宽度是固定的，并且有大量的墙到墙的填充物。
不，由于宽度固定，他的代码似乎没有响应，对吧。不，我的意思是看看 OP 的图像。他希望根据容器中的文本缩放相同的图像。它的大小不应相同
OIC，所以收缩环绕文本而不是图像。

【解决方案2】：

据我所知，没有唯一的 HTML/CSS 解决方案可以使这项工作有效 - 如果我错了，请纠正我。 OP 希望有一个大小未知的图像动态缩放到父容器的高度。另一方面，这个容器动态地依赖于文本长度并且没有固定的高度。图片大小可以变化，文字大小可以变化。

这是一个使用 jQuery 和 <img> 而不是 background-image 的 概念证明 解决方案，结果如下： HTML：

<div class="box">
  <img class="img" data-src='https://placehold.it/500x500'>
  <div class="text">This box is one line.</div>
</div>

JavaScript / jQuery

var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
  var heightParent = $boxes.eq(i).outerHeight() - 4; 
  // -4 because of border 2px top + 2px bottom
  $imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
  $imgs.eq(i).height(heightParent);
}

CSS（仅更改部分）：

.img {
  float:left;
  margin-left: -24px;
  margin-top: -24px;
  margin-right: 10px;
}

实现你想要的并不是一件简单的事情，因为你不想设置高度。不在图像上，也不在父容器上。

使用背景图片的问题： 使用background-image 方法可以很容易地使用position:absolute 将图像正确地定位到左侧，但右侧的边距（到文本）不起作用，因为宽度可能不同。

使用 img 的问题： 另一方面，使用<img> 你会遇到问题，只要没有父级具有固定高度，父级<div> 将始终处于图像的原始高度 - 在您的示例中就是这种情况.

JavaScript 部分使其工作： 为避免这种情况，您可以通过将 url 设置为 data 属性来避免在页面加载时创建图像，我将其称为 data-src。现在当页面加载时，您可以查找父级的<div> natural 高度。接下来，您将 URL 从 data-src 属性传递到 src 属性，以便呈现图像。由于我们知道前父母的高度，我们可以将其设置为图像高度。

CSS 负边距用于撤消您在父容器上的padding: 24px 设置，以便正确定位图像。如果你问自己为什么我从高度中减去 4 - 这是因为你希望你的图像在边界内，所以我们需要将 2px 减去顶部 + 2px 减去你的底部边框。

注意：当然，如果没有进一步的脚本，此解决方案将无法响应，但您的父 <div> 似乎无论如何都没有响应。

小提琴：https://jsfiddle.net/av9pk5kv/

布局愿望和上例的问题： 您可能会争辩说，希望的布局首先是不值得追求，如果您不更改其他内容，它将无法处理更多的文本。在某些时候，文本太多了，因此无法放置填充父级的图像：为了部分避免它，您必须删除父级的固定宽度。但是，如果通过 JavaScript 动态包含图像会导致与以前一样多的文本行（文本被压缩），则会发生相同（或相似）的结果。

我将如何解决这些问题：我会使用另一种布局。

【讨论】：