Hybreeder Hybreeder - 2 months ago 15
jQuery Question

How to display bootstrap slider image full screen without stretching on mobile device using img tag?

I founded slider on this link (http://codepen.io/jpI/pen/rrVPZd). It's working for me on desktop but getting issue on mobile device.This slider is not display full screen on mobile.I tried below css and getting full screen but image is stretching.I have to display only center part of image.I am using img tag.Would you help me in this.


Thanks in advance


Css

//getting image full screen in mobile device.

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

Answer

I've corrected your code a bit.
The main idea is to use backgrounds instead of imgs to achieve cover effect.
Here my fork http://codepen.io/g1un/pen/mArjzB
Here are corrections:
1. Changes from imgs to 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. To center the title vertically on small screens

.carousel-caption {
  bottom: 36%;
}

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