У меня есть слайд-шоу изображений. Он состоит из нескольких компонентов:
- Черный фон
- Тонкая полоса в нижней части экрана, которая отображает заголовок текущего изображения (размер шрифта и вертикальные размеры в целом. не указано)
- Кнопка для полноэкранного показа слайдов или выхода из полноэкранного режима, если она уже есть, размещенная на нижней панели
- Набор из трех изображений на черном фоне, занимающий все доступное пространство сохраняя соотношение сторон.
Изображения располагаются друг над другом, перетасовывая между собой роли «спереди», «в середине» и «сзади». «Среднее» изображение имеет непрозрачность 1, остальные имеют непрозрачность 0. Каждые несколько секунд функция Javascript обозначает текущее «заднее» изображение как новое «среднее», а «среднее» изображение - как новое «переднее», соответственно изменяя их непрозрачность (переход CSS происходит в течение следующей секунды, превращая их друг в друга). Изображение, которое ранее находилось в «front», удаляется, а новое изображение загружается в «back» (путем непосредственного изменения атрибута src).
Я хочу, чтобы эти изображения заполняли весь текст доступного им пространства экрана - все, кроме этой нижней панели - при сохранении их аспекта rat ios. Какой размер является нижней границей размера изображения, определяет размер изображения. В то же время изображения должны быть центрированы в том направлении, в котором они не заполняются (т.е. горизонтально по центру для высоких изображений и вертикально по центру для широких изображений). Кроме того, изображения должны адаптироваться к изменяющемуся размеру экрана , предпочтительно , поскольку размер окна перетаскивается.
В настоящее время я использую длинную функцию Javascript для (1) найти доступное пространство, вычитая высоту нижней панели из высоты экрана, (2) вычисляя соотношение сторон изображения, (3) сравнивая, какой размер является ограничивающим фактором, и (4) изменяя размер и изменяя положение элемент соответственно. Эта функция запускается событием window.onresize и запускается вручную при каждом изменении изображения. Однако при нажатии и перетаскивании для изменения размера окна функция вызывается снова и снова. Это излишне сложное в вычислительном отношении, и я хотел бы вместо этого изменить размер в CSS, если это возможно.
Когда я столкнулся с этой проблемой для веб-сайта, который обычно отображает изображения, мое решение было calc() :
img.class {
font-size:24pt; /* same font size as h1, which is the biggest title element. Used to calculate em */
max-width: calc(100vw - 80px); /* exactly enough to account for horizontal margins/padding */
max-height: calc(100vh - 2em); /* leave space for title but otherwise fill window */
}
Разница между этим и этим заключается в том, что ограничивающим фактором only был размер экрана, и я точно знал, насколько велики другие элементы, которые "должны" поместиться на экран был. Весь родительский элемент был центрирован (и, конечно, горизонтальное центрирование легко), и поскольку экран должен был прокручиваться, мне не пришлось беспокоиться о вертикальном центрировании. Так что это решение здесь не подлежит повторному использованию, я не думаю.
Интуитивно понятное решение, которое я пробовал, состояло в том, чтобы установить горизонтальное и вертикальное выравнивание в родительском <div> и установить max-width и max-height в терминах процентов (поскольку я не могу получить высоту другого элемента в CSS для математики):
#parent{
width: 100%;
height: 100%;
top: 0;
left: 0;
position: relative;
padding: 0;
margin: 0;
}
img {
transition: opacity 1s;
margin: auto;
max-width: 100%;
max-height: 100%;
}
Но это не только не отцентрировало изображения, но и вообще не показало их! Удаление max-width и max-height из <img> приводит к тому, что изображение появляется, но выходит за границы экрана и навигационной панели под ним, что тоже не то, что мне нужно. Как правильно выполнить sh эту задачу, используя CSS вместо длинного JavaScript?