Question

我有一个图像和一个并排的文本（左边的图像，右边的文字）。

如何根据文本高度（和宽度与高度保持成比例）来调整图像高度，而不是在图像周围包装文本。

这是我能够去的地方：

<div style="display: table; width: 100%;">
  <div style="display: table-cell;">
    <img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
  </div>
  <div style="display: table-cell; vertical-align: top;">
  	<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Answer 1

也许像这样的灵活解决方案：

走完全宽并调整屏幕大小，它正在工作，但是当图像开始增长更快时会有一些错误（所以我们可能会限制媒体查询或最大高度）

.container {
  display: flex;
  width: 100%;
}

.container>div:nth-child(1) {
  flex:0;
  width: fit-content;
}
.container>div:nth-child(2) {
  flex: 1;
}

img {
  width: auto;
  height: 100%;
  max-height:500px; /* Limit the height to avoid bugs when the image get bigger */
}

<div class="container">
  <div>
    <img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>
<div class="container">
  <div>
    <img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation u
    </p>
  </div>
</div>
<div class="container">
  <div>
    <img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff">
  </div>
  <div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. est laborum. derit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Answer 2

以下是您的要求：

图像根据段落高度更改高度。这意味着......
图片更改宽度，表示......
段落在剩余空间中重新流动，很可能导致新的高度，这意味着......
您回到步骤 1。

鉴于上述情况，有两种可能的情况：

你很幸运，在某些时候 3。不会导致段落更改高度，因此不会触发 1。 =＆gt;你的脚本停止了。
你没那么幸运， 3。总是触发 1。在两个图像高度/段落回流之间交替。页面在你之前跳舞/闪烁，它被阻止渲染，直到它崩溃浏览器。

此外，在某些情况下，图像会比其自然尺寸更大，这应该避免。

有了保留，在生产环境中使用它真的不是一个好主意，这就是你要求的。令我惊讶的是，至少对于您在示例中使用的图像+段落，它不会使浏览器崩溃。但我很确定它会有尺寸。随意测试一下：

function bestFit(el) {
  let image = $('img', el),
      paragraph = $('p', el);
  if (image.width() < paragraph.width() / 1.5) {
  	
    image.css({
      height: paragraph.height() + 'px', 
      width: 'auto'
    });
    
  	
    if (image.height() !== paragraph.height()) {
      bestFit(this);
    }
  } else {
    image.css({
      width: image.closest('.best-fit').width() * .4 + 'px',
      height: 'auto'
    });
  }
}
function resizeImages() {
  $('.best-fit').each(function(){bestFit(this)});
}

$(window).on('load resize', resizeImages);

.best-fit {
  display: flex;
  position: relative;
}
.best-fit img {
  padding: 1em 0;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="best-fit">
  <div>
    <img src="https://lh3.googleusercontent.com/DSBmG1Tl65XysmdiC92sBuA4WQImAqViuKo1zZD9ZGgOpKTnR0hp3EoJW1MlX8JWKLwXdxvZYgcz_HM4WN1uWVKslNkgXeEbtWfP=w234-h160-l80-sg-rj-c0xffffff" style="width:auto; height:auto;">
  </div>
  <div>
  	<p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

编辑：我添加了一个小调整，不允许图像超过总宽度的40％。

如何使图像高度适合并置的文本高度

2 个答案: