SlickCarousel 中的垂直对齐图像
Vertical Align Images in SlickCarousel
我最近在一家视听公司开始了一份新工作,他们要求我开发一个应用程序,允许用户(无需身份验证)将图像上传到显示页面并自动滚动浏览。
我选择了唯一一个我觉得有用的旋转木马,但我的问题是横向图像与纵向图像没有垂直对齐。
我的代码设置为将上传的图像发送到数据库,然后检索并自动显示在轮播中,因此每张图像都有自己的 dividual div 标签。
页面本身在没有数据库连接的情况下不会加载,并且由于其中的 PHP 元素而无法在 JSFiddle 中工作。
这里还有我的问题的截图:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
我希望图像 2 显示在页面中央,但我到处寻找正确的信息,但似乎找不到我要找的东西。
请帮助我,我将不胜感激!
AlexJamesDean.
您可以为图片添加位置div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}
我最近在一家视听公司开始了一份新工作,他们要求我开发一个应用程序,允许用户(无需身份验证)将图像上传到显示页面并自动滚动浏览。
我选择了唯一一个我觉得有用的旋转木马,但我的问题是横向图像与纵向图像没有垂直对齐。
我的代码设置为将上传的图像发送到数据库,然后检索并自动显示在轮播中,因此每张图像都有自己的 dividual div 标签。
页面本身在没有数据库连接的情况下不会加载,并且由于其中的 PHP 元素而无法在 JSFiddle 中工作。
这里还有我的问题的截图:
Image 1 displaying portrait image at full height
Image 2 displaying landscape image at top of the page
我希望图像 2 显示在页面中央,但我到处寻找正确的信息,但似乎找不到我要找的东西。
请帮助我,我将不胜感激!
AlexJamesDean.
您可以为图片添加位置div
.autoplay{position: relative;}
#img_div {
width: auto;
height: auto;
postion: absolute;
top: 50%;
transfrom: translateY(-50%);
}