Bootstrap 4.x Carousel与White Space和&amp ;;图片对齐

时间:2017-08-21 00:39:03

标签: jquery html ios css twitter-bootstrap

我在这里检查过以前的问题和答案,我的问题略有不同。页面在移动设备上获得了过多的空白区域,但在桌面上没有此外,如果移动视图变为横向,则空白问题将消失。

我遇到的另一个问题是旋转木马中的图像在其视图中被裁剪到大部分图像不可见的程度。在我看来,图像应垂直和水平对齐,但仍然启用流体调整大小。这可能吗?要点是,当你观察图像时,你会从图像的正中心开始看到它的可见部分。

以下是页面:https://kianrafiee.github.io/unity/

以下是一些屏幕截图,以帮助展示我所面临的问题的含义。

1)在iPhone SE上的Chrome for iOS中的移动视图中,轮播下方和页面上的其他位置有过多的空白区域。如果浏览器处于横向模式,此问题将消失:

白色空间问题展览A. white space problem exhibit A

白色空间问题展示B. white space problem exhibit B

景观模式,问题消失了 landscape mode, problem gone

2)在桌面浏览器上,一些图像没有用,因为图像的大多数好部分都不可见,因为轮播如何裁剪它。在我看来,图像应垂直和水平对齐,但仍然启用流体调整大小。这可能吗?要点是当你看图像时,我想要它,这样你就可以从图像的正中心看到它的可见部分。

图像裁剪问题展示A. image cropping problem exhibit A

当浏览器调整为较小的宽度时,

图像裁剪问题消失了 image cropping problem gone, when browser is resized to a smaller width

3)在Chrome浏览器的Mac桌面上,除了主顶部之外,每个旋转木板下面都有过多的空白区域,导致网格系统没有垂直对齐到每一行的中间位置。这些轮播使用官方bootstrap示例位于网格系统内。我检查了这些元素,并注意到旋转木马图像的容器尺寸比旋转木马中的任何图像高得多。但我找不到我需要实现的样式表更改。我使用了bootstrap官方示例中的网格对齐,但它没有解决问题,尽管它确实有所帮助。

桌面上的空白问题导致垂直对齐到中间不工作展示A. white space problem on desktop exhibit A

0 个答案:

没有答案