У меня есть страница, созданная в Bootstrap, которая содержит строку заголовка, строку нижнего колонтитула и строку содержимого. Я новичок во всем этом и далеко не профессионал. После долгих чтений, поисков и попыток я нашел способ заставить Bootstrap «соблюдать» высоту экрана, использовать все доступное пространство, но не увеличивать необходимость в полосах прокрутки. Это выглядит примерно так:
https://www.codeply.com/p/OJFLXSixnO
Теперь строка содержимого в основном представляет собой средство просмотра изображений / видео. Изображения / видео читаются с Ajax и добавляются на страницу после того, как они были обработаны. В настоящее время я выполняю sh с помощью Javascript, вычисляя высоту строки содержимого и затем соответственно масштабируя изображение. Но мне было интересно, есть ли лучшее решение, использующее только CSS / Bootstrap?
Все, что я пробовал, не работало так или иначе. Требования:
- Если изображение достаточно маленькое, покажите его таким, как оно есть, по центру по вертикали и горизонтали
- Если изображение слишком большое, уменьшите его, сохраняя соотношение сторон , затем покажите его, как раньше, по центру
- Должно работать для изображения и видео (в основном, на странице два элемента, видимость переключается между в зависимости от того, что загружено из Ajax
Я могу получить изображение в ряд, я могу сделать так, чтобы оно без проблем учитывало ширину страницы, но я не могу ради любви сделать так, чтобы большие изображения уменьшались настолько, что страница не размер экрана больше, чем обычно, я всегда получаю полосы прокрутки.
Страница должна работать на любом устройстве, как в альбомной, так и в горизонтальной ориентации. Есть идеи, как заставить это работать?