Вертикальное выравнивание изображений в SlickCarousel
Недавно я начал новую работу в компании Audio Visual, и они попросили меня разработать приложение, которое позволяет пользователям (без аутентификации) загружать изображения на страницу отображения и автоматически прокручивать их.
Я выбрал единственную карусель, которая мне когда-либо показалась полезной, но моя проблема в том, что ландшафтные изображения не выровнены вертикально с портретными изображениями.
Мой код настроен таким образом, что загруженное изображение отправляется в базу данных, а затем извлекается для автоматического отображения в карусели, поэтому каждое изображение имеет свой индивидуальный тег div.
Сама страница не загружается без подключения к базе данных и не работает в JSFiddle из-за элементов PHP внутри.
Также вот скриншоты моей проблемы:
Изображение 1, отображающее портретное изображение на полную высоту
Изображение 2, отображающее пейзажное изображение вверху страницы
Я хочу, чтобы изображение 2 отображалось в центре страницы, и везде, где я ищу правильную информацию, я, кажется, не могу найти то, что ищу.
Пожалуйста, помогите мне, я был бы очень признателен!
AlexJamesDean.
Решение
Вы можете добавить позицию к изображению div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
Другие решения
Вы можете попробовать таблицу отображения:
http://www.vanseodesign.com/blog/demo/vertical-centering/table-cell.php