【发布时间】：2020-01-29 08:34:24
【问题描述】：
我需要创建多个包含图像和一些文本的子容器，其中子容器根据其中的文本缩小或扩展。图像高度需要是放置它的子容器的固定百分比（70%），允许文本从下方包裹它。 （在桌面视图模式下）
但是，在我的情况下，图像不会自行调整大小，并且内部容器的大小保持不变，而与 2nd-3rd 容器中的缩小文本无关。
我使用的CCS如下：
.OuterFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-style: solid;
margin: 1px;
}
.InnerFlexContainer {
display:inline-flex;
align-items: center;
border-style: solid;
margin: 2px;
padding: 2px;
}
.InnerBlockContainer {
display:block;
margin: 2px;
padding: 2px;
}
.TextContainer {
display: block;
margin: 1em;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
.image{
display: block;
float: left;
width: auto;
height: auto; /*Changing it to 70% makes the image dissapear*/
margin: 1em;
}
除了“InnerFlexContainer”之外，还需要“InnerBlockContainer”（Display:Block），因为“Image:Float Left”在 Flex Container 内不起作用。
如何使“InnerBlockContainer”和“InnerFlexContainer”根据缩小的文本缩小，同时确保图像自动调整为容器大小的 70%。
下面是完整的代码和 JS Fiddle：
.OuterFlexContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
border-style: solid;
margin: 1px;
}
.InnerFlexContainer {
display:inline-flex;
align-items: center;
border-style: solid;
margin: 2px;
padding: 2px;
}
.InnerBlockContainer {
display:block;
margin: 2px;
padding: 2px;
}
.TextContainer {
display: block;
margin: 1em;
margin-inline-start: 1em;
margin-inline-end: 1em;
}
.image{
display: block;
float: left;
width: auto;
height: auto; /*Changing it to 70% makes the image dissapear*/
margin: 1em;
}<div class="OuterFlexContainer">
<div class="InnerFlexContainer">
<div class="InnerBlockContainer">
<img class="image" src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg">
<div class="TextContainer">
<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>
</div>
</div>
<div class="InnerFlexContainer">
<div class="InnerBlockContainer">
<img class="image" src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg">
<div class="TextContainer">
<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>
</div>
</div>
</div>
<div class="InnerFlexContainer">
<div class="InnerBlockContainer">
<img class="image" src="https://cdn.pixabay.com/photo/2018/10/30/16/06/water-lily-3784022__340.jpg">
<div class="TextContainer">
<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>
</div>
</div>
</div>
</div>【问题讨论】：