如何使图像高度达到包含文本div的一定百分比?

问题描述 投票:0回答:2

[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
2个回答
0
投票

将图像包装在'div'标签内,并在其中添加最小高度。

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

0
投票

您需要将img包装在具有特定高度的容器中。 Pourcent仅在指特定高度时才起作用。如果您的身高是动态的,则可以使用一些JS来获取您的集团文字的高度,例如。

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

© www.soinside.com 2019 - 2024. All rights reserved.