Mám ťažkosti s pokusom o úpravu tohto nastavenia #container
by malo byť presne height
z viewport
, #caption
mali by take as much height as it needs
a img in #image
mali by fill the remaining height
(pri zachovaní pomeru strán). Nikdy by nemal #container
presahujú výrez height
.
<div id="container">
<div id="image">
<img src="/images/my-image.jpg" alt="my-image">
</div>
<div id="caption">
<p>
Some info about this image.<br>
Sometimes this could be two lines.<br>
Maybe even three.
</p>
</div>
</div>
Tu je príklad dynamického fungovania:
Nejaké návrhy? Aj ja som sa pohrával s flexom a stolmi sám, ale bezvýsledne, stránka vždy skončí nad výrezom height
.
odpovede:
2 pre odpoveď č. 1môžeš použiť flexbox
pre to
a možno budete potrebovať nejaké mediálne otázky.
body {
margin: 0
}
#container {
display: flex;
flex-direction: column;
height: 100vh
}
#caption {
flex: 1;
background: red
}
img {
display: block;
margin: auto
}
<div id="container">
<div id="image">
<img src="/images///lorempixel.com/300/500" alt="my-image">
</div>
<div id="caption">
<p>
Some info about this image.
<br>Sometimes this could be two lines.
<br>Maybe even three.
<br>
</p>
</div>
</div>