Question

给出此HTML

<div class="flex">
  <div>
    <img src="https://via.placeholder.com/300x300" alt="">
  </div>

  <div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
  </div>
</div>

如何根据浏览器的宽度和文本的字体大小使用文本div自动调整图像高度？

https://jsfiddle.net/msuL6pvx/在这种情况下，图像必须按比例缩小以具有与文本相同的高度
https://jsfiddle.net/msuL6pvx/1/在这种情况下，图像必须放大到最大尺寸（300x300），并且不得超过这些尺寸

Answer 1

我不认为纯CSS可以做到这一点。我唯一能想到的就是将position: absolute的{{1}}与max-height结合使用，以将其从流程中移除；然后使用javascript调整文本的边距。

https://jsfiddle.net/zphb0fLd/

希望它有用。

Answer 2

据我所知，图像尺寸可以相对于文本尺寸增加，但是相反的情况是不可能的。

这是我的代码。我使用flexbox根据文本大小增加图像的高度。让我知道它是否满足您的要求。


<div class="flex">
  <div class="image-container">
    <img src="https://via.placeholder.com/300x300" alt="">
  </div>

  <div class="text-container">
    <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis nisi elit, vitae interdum nisi porttitor a. Maecenas porta mollis venenatis. Proin suscipit, est et malesuada ultricies, nisi elit aliquam arcu, et luctus felis dolor euismod ante. Praesent nec malesuada arcu. Nunc rutrum erat risus, id elementum leo dignissim eu. Fusce feugiat, massa vestibulum venenatis ullamcorper, nisl justo aliquam purus, nec pellentesque tellus magna non quam. Pellentesque luctus quam in justo congue tempor. Cras placerat sit amet nulla id pretium. Nulla facilisi. Phasellus dictum neque sed lacus congue, vel dapibus enim efficitur.
    </p>
  </div>
</div>


.flex{
  display:flex;
  flex-wrap:wrap;

}
.image-container{
  flex:1;
}
.text-container{
  flex:3;
}
.text-container p{
  font-size:2em;
  padding:10px;
}
.image-container img{
  width:100%;
  height:100%;
  object-fit:cover;
}

实时示例链接：https://codepen.io/pranaysharma995/pen/JjdQWyQ

使图像高度自动调整为文本高度

2 个答案: