Мне нужно создать несколько дочерних контейнеров, содержащих изображение и текст, где дочерний контейнер уменьшается или расширяется в соответствии с текстом в нем. Высота изображения должна составлять фиксированный% (70%) дочернего контейнера, в который он помещен, что позволяет тексту обернуть его снизу. (В режиме просмотра рабочего стола)
Однако в моем случае размер изображения не изменяется сам по себе, и внутренний контейнер остается неизменным, независимо от уменьшенного размератекст во 2-м и 3-м контейнерах.
Я использую 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;
}
The 'InnerBlockContainer '(Display: Block) требуется в дополнение к' InnerFlexContainer ', так как' Image: Float Left 'не работает внутри контейнера Flex.
Как сделать 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>
JS Fiddle: https://jsfiddle.net/mithunu/4d1c2L0b/