时间戳

首页 > 解决方案 > 使图像高度自动调整为文本高度

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

问题描述

鉴于此 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 自动缩放？

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

标签： htmlcssflexbox

解决方案

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

这是我的代码。我使用 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

推荐阅读