浮动图片到左边，适应父容器，保持纵横比。

Question

浮动图片到左边，适应父容器，保持纵横比。

htmlcss

5

我有以下内容：jsfiddle.net 我想要的是让这张图片靠左浮动，填充父级元素（.box）。请注意，.box 的高度可能因为文本行数的不同而变化。

最终效果应该是这样的： i.imgur.com

怎么做呢？

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

- user6828106

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zer00ne · Answer 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>

- Michael Troger · Answer 2

据我的了解，没有纯 HTML/CSS 解决方案可以实现这一点 - 如果我错了，请指出。原帖要求将大小不确定的图像动态缩放到其父容器的高度。另一方面，该容器根据文本长度进行动态调整，没有固定的高度。图像大小和文本大小都可能会变化。

下面是使用 jQuery 和而不是 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时的问题： 使用background-image方法可以轻松地将图像正确缩放到左侧，并使用position:absolute进行定位，但右侧（文本）的边距将无法工作，因为宽度可能会有所不同。

使用img时的问题： 另一方面，使用<img>会导致父级<div>始终处于图像的原始高度，除非父级具有固定高度-这是您示例中的情况。

JavaScript 部分实现： 为了避免这种情况，您可以通过将 url 设置为 data 属性来避免在页面加载时创建图像，我称之为 data-src。现在当页面加载时，您可以查找父级的 <div> 的自然高度。接下来，将 data-src 属性中的 URL 传递给 src 属性，以便呈现图像。由于我们知道前一个父级的高度，因此我们可以将其设置为图像的高度。

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

注意：当然，如果没有进一步的脚本处理，这种解决方案无法实现响应式设计，但是您的父级 <div> 似乎本身就不具备响应性。

Fiddle: https://jsfiddle.net/av9pk5kv/

关于布局问题和上面的例子： 你可以说，一开始就不值得追求所谓的期望布局，如果你不改变其他东西，它将无法处理更多的文本。在某个点上，有太多的文本，以至于不可能放置填充父元素的图像：为了部分避免这种情况，您需要删除父元素的固定宽度。但是，如果通过JavaScript动态包含图像导致比之前更多的文本行（文本被挤压），则会发生相同（或类似）的结果。

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