Question

我有以下内容：jsfiddle.net

我要做的是让图片浮动到文本左侧，使其填充父级（.box）。请注意，.box的高度可能会有所不同，具体取决于文本行数。

最终结果应如下所示： i.imgur.com

如何做到这一点？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

据我所知，没有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部分使其有效： 为避免这种情况，您可以通过将网址设置为data属性来避免在页面加载时创建图像，我将其称为data-src。现在，当页面加载时，您可以查找父级的<div> 自然高度。接下来，将data-src属性中的URL传递给src属性，以便渲染图像。我们知道前父母的身高，我们可以将其设置为图像高度。

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

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

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

布局愿望和上述示例的问题： 您可能会认为希望布局首先不值得追求，如果您不更改其他内容，则无法使用更多文本。在某些时候，有太多的文字，所以只是不可能把图像填充父母：为了避免部分原因，您必须删除父级的固定宽度。但是，如果通过JavaScript动态包含图像会导致更多的文本行（文本被挤压），则会发生相同（或类似）的结果。

我如何解决这些问题：我会使用其他布局。

Answer 2

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

PLUNKER

段

＆＃13;

<!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>

＆＃13;

浮动图像左，适合父，保持纵横比

2 个答案:

段