_ Image-Block (M)
CODE
×
HTML
<div class="container mt-6"><div class='row image-block-m ar justify-content-center'> <div class='image mx-auto col-12 col-md-10 col-lg-8'> <img class='img-fluid' src='img/FilmStills20.png'> <div class='caption'>Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.</div> </div> </div></div>
CSS
.image-block-m.ar img { aspect-ratio: 1.6; object-fit: cover; } img.img-fluid { width: 100%; } div.caption { color: var(--fc2); font-family: var(--body-font-1); font-style: var(--body-font-2); font-weight: var(--body-font-3); line-height: var(--lh-s); font-size: var(--fs-s); letter-spacing: var(--bf-ls); word-spacing: var(--bf-ws); max-width: var(--max-w); } @media screen and (max-width: 991px) { div.caption { font-size: var(--fs-xs); } } @media screen and (max-width: 575px) { div.caption { font-size: var(--fs-xxs); } } img + .caption { margin-top: 6px; }
JS
_ Image-Block (M)
Last Edit: Nov 9, 2023, 12:05pm
×
Das galaktische Zentrum (links unten) im infraroten Spektrum, verdeckt von Staubwolken.