jquery - 如何使用 img 标签在不拉伸(stretch)移动设备的情况下全屏显示 Bootstrap slider 图像？

Question

我在这个链接 ( http://codepen.io/jpI/pen/rrVPZd ) 上创建了 slider 。它在桌面上对我有用，但在移动设备上出现问题。这个 slider 在移动设备上不显示全屏。我在 css 下尝试并获得全屏，但图像正在拉伸(stretch)。我必须只显示图像的中心部分。我正在使用 img标签。你能帮我吗？

提前致谢

CSS

//在移动设备上获取全屏图像。

 .carousel-inner>.item>img, .carousel-inner>.item>a>img{
  height: 100%;
    }

Answer 1

我已经稍微修正了你的代码。
主要思路是用backgrounds代替imgs实现封面效果。
这是我的 fork http://codepen.io/g1un/pen/mArjzB
以下是更正:
1. imgs 到 backgrounds 的变化

.carousel-inner .item {
/*   max-height: 680px; */
  height: 100vh;
  background: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-1.jpg') no-repeat center top;
  background-size: cover;
}

.carousel-inner .item:nth-child(2) {
  background-image: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-2.jpg');
}

.carousel-inner .item:nth-child(3) {
  background-image: url('https://dl.dropboxusercontent.com/u/4357218/Assets/Images/Codepen/Bootstrap%20Carousel/slide-3.jpg');
}

2. 标题在小屏幕上垂直居中

.carousel-caption {
  bottom: 36%;
}

@media screen and (min-width: 768px) {
  .carousel-caption {
    right: 20%;
    left: 20%;
  }
}