Próbuję wyśrodkować obraz, który korzysta z automatycznej regulacji wysokości, ponieważ chciałbym wypełnić szerokość poziomą (100%). Jego kontener jest zdefiniowany z wartością maksymalnej wysokości i przelewu -y ukryty.
HTML:Pionowe wyśrodkowanie obrazu z automatyczną wysokością i maks. Wysokością
<figure>
<img src="http://lorempixel.com/500/500/" alt="Imagem" />
<figcaption>
<p>Sapien elit in malesuada semper mi, id sollicitudin urna fermentum.</p>
</figcaption>
</figure>
CSS:
figure {
padding: 5px 0;
max-height: 300px;
overflow-y: hidden;
position: relative;
}
figure>img {
width: 100%;
height: auto;
position: relative;
top: -50%;
}
figcaption {
bottom: 0;
position: absolute;
background-color: #1e1e1e;
color: white;
padding: 5px 10px;
font-size: 14px;
text-align: center;
width: 100%;
}
Ładna sztuczka człowiek! – user2965241