如何使图像高度包含文本div的一定百分比？答案

【问题标题】：How to make image height certain percentage of containing text div?如何使图像高度包含文本div的一定百分比？
【发布时间】：2020-01-26 18:20:06
【问题描述】：

有一个 div，里面有一张图片和一些文字。包含的 div 没有特定的高度，并且取决于 div 中的文本。

我正在为图像使用以下 css 并包含 div：

.Image{
    float: left;
    width: auto;
    max-height: 70%;
    margin-right: 1em;
    border: 0;
}
.DivBlock{
    display: block;
    width: 100%;
}

但是，由于 div 没有指定高度，因此图像高度不会根据外部 div 进行调整。如何调整它以使其仅为包含 div 高度的 70%？

在下面找到整个代码：

.Image{
    float: left;
    width: auto;
    max-height: 70%;
    margin-right: 1em;
    border: 0;
}
.DivBlock{
    display: block;
    width: 100%;
}

<h3>History:</h3>
<div class="DivBlock">
    <img class="Image" src="https://cdn.pixabay.com/photo/2015/10/09/00/55/lotus-978659__340.jpg" />
    <p>Matheran was identified by Hugh Poyntz Malet, the then district collector of Thane district in May 1850. Lord Elphinstone, the then Governor of Bombay laid the foundations of the development as a future hill station. The British developed Matheran as a resort to beat the summer heat in the region.</p>
    <p>Matheran is the birthplace of freedom fighter Veer Bhai Kotwal. He was born on 1 December 1912 in a Barber family. The state government has built a monument in his memory. The Matheran Hill Railway was built in 1907 by Sir Adamjee Peerbhoy and covers a distance of 20 km (12 mi), over large swathes of forest territory.</p>
    <p>The Matheran hill railway, also known as Matheran Light Railway (MLR), was inspected by UNESCO world heritage site officials but failed to make it to the list as a World Heritage Site. India's other Hill Railways like the Darjeeling Railway, the Kangra Valley Railway, Nilgiri Mountain Railway are already on the list.</p>
</div>

同样可以找到 jsfiddle： https://jsfiddle.net/mithunu/tu25y6da/

【问题讨论】：

标签： css image responsive

【解决方案1】：

将图像包裹在 'div' 标签内并为其添加 min-height。

<div class="img-wrapper">
    <img class="Image" src="https://cdn.pixabay.com/photo/2015/10/09/00/55/lotus-978659__340.jpg" />
</div>
<style>
    .img-wrapper{
        display:inline-block;
        min-height:70%;
    }
</style>

【讨论】：

【解决方案2】：

您需要将img 包装在具有特定高度的容器中。 Pourcent 仅在它指的是特定高度时才有效。如果你的身高可能是动态的，你可以使用一些 JS 来获取你的 bloc 文本的高度。

.container-img {
  min-height: 340px;
  float: left;
  width: auto;
  margin-right: 1em;
}


.Image {
  max-height: 70%;
  border: 0;
}

.DivBlock {
  display: block;
  width: 100%;
}

<h3>History:</h3>
<div class="DivBlock">
  <div class="container-img">
   <img class="Image" src="https://cdn.pixabay.com/photo/2015/10/09/00/55/lotus-978659__340.jpg" />
  </div>
  <p>Matheran was identified by Hugh Poyntz Malet, the then district collector of Thane district in May 1850. Lord Elphinstone, the then Governor of Bombay laid the foundations of the development as a future hill station. The British developed Matheran as a resort to beat the summer heat in the region.</p>
  <p>Matheran is the birthplace of freedom fighter Veer Bhai Kotwal. He was born on 1 December 1912 in a Barber family. The state government has built a monument in his memory. The Matheran Hill Railway was built in 1907 by Sir Adamjee Peerbhoy and covers a distance of 20 km (12 mi), over large swathes of forest territory.</p>
  <p>The Matheran hill railway, also known as Matheran Light Railway (MLR), was inspected by UNESCO world heritage site officials but failed to make it to the list as a World Heritage Site. India's other Hill Railways like the Darjeeling Railway, the Kangra Valley Railway, Nilgiri Mountain Railway are already on the list.</p>
</div>

https://jsfiddle.net/2ykovaxr/

【讨论】：