Bootstrap carousel shows enlarged images on iphone - css

Question

I would be really appreciate if you can help me with the next issue.
I have template with Bootstrap carousel on the frontpage. Size of the images shows ok on the laptop, but when I open it in Iphone - images still big and it looks like enlarged picture. http://c2n.me/itAJbn.jpg
Css code is
#main-slider {
position: relative;
}
#main-slider .carousel h2 {
}
#main-slider .carousel .btn {
border: 3px solid rgba(255, 255, 255, 0.5);
color: #fff;
border-radius: 5px;
float: right;
margin-top: -25px;
}
#main-slider .carousel .btn:hover {
background-color: rgba(255, 255, 255, 0.3);
}
#main-slider .carousel .boxed {
padding: 10px 15px;
background-color: rgba(0, 0, 0, 0.8);
display: inline-block;
}
#main-slider .carousel .item {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
left: 0 !important;
opacity: 0;
top: 0;
position: absolute;
width: 100%;
min-height: 650px;
display: block !important;
-webkit-transition: opacity ease-in-out 600ms;
-moz-transition: opacity ease-in-out 600ms;
-o-transition: opacity ease-in-out 600ms;
transition: opacity ease-in-out 600ms;
}
#main-slider .carousel .item:first-child {
top: auto;`enter code here`
position: relative;
html
<?php
$args = array( 'post_type'=>'zee_slider', 'orderby' => 'menu_order','order' => 'ASC' );
$sliders = get_posts( $args );
$total_sliders = count($sliders);
?>
<section id="main-slider" style="margin: 0; padding: 0;">
<div class="carousel slide wet-asphalt" data-ride="carousel">
<ol class="carousel-indicators">
<?php for($i = 0; $i<$total_sliders; $i++){ ?>
<li data-target="#main-slider" data-slide-to="<?php echo $i ?>" class="<?php echo ($i==0)?'active':'' ?>"></li>
<?php } ?>
</ol>
<div class="carousel-inner">
<?php foreach ($sliders as $key => $slider) {
$full_img = wp_get_attachment_image_src( get_post_thumbnail_id( $slider->ID ), 'full');
$slider_position = get_post_meta($slider->ID, 'slider_position', true );
$boxed = (get_post_meta($slider->ID, 'slider_boxed', true )=='yes') ? 'boxed' : '';
$has_button = (get_post_meta($slider->ID, 'slider_button_text', true )=='') ? false : true;
$button = get_post_meta($slider->ID, 'slider_button_text', true );
$button_url = get_post_meta($slider->ID, 'slider_button_url', true );
$video_url = get_post_meta($slider->ID, 'slider_video_link', true );
$video_type = get_post_meta($slider->ID, 'slider_video_type', true );
$bg_image_url = get_post_meta($slider->ID, 'slider_background_image', true );
$background_image = 'background-image: url('.wp_get_attachment_url($bg_image_url).')';
$columns = false;
if( !empty($image_url) or !empty($video_url) ){
$columns = true;
}
if( $video_type=='youtube' ) {
$embed_code = '<iframe width="640" height="480" src="//www.youtube.com/embed/' . get_video_ID( $video_url ) . '?rel=0" frameborder="0" allowfullscreen></iframe>';
} elseif( $video_type=='vimeo' ) {
$embed_code = '<iframe src="//player.vimeo.com/video/' . get_video_ID( $video_url ) . '?title=0&byline=0&portrait=0&color=a22c2f" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>';
}
if( $full_img ){
$embed_code = '<img src="' . $full_img[0] . '" alt="">';
$columns = true;
}
?>
<div class="item <?php echo ($key==0) ? 'active' : '' ?>" style="<?php echo ( $bg_image_url ) ? $background_image : '' ?>">
<div class="container">
<div class="row">
<div class="<?php echo ($columns) ? 'col-sm-6' : 'col-sm-12' ?>">
<div class="carousel-content centered <?php echo $slider_position ?> " >
<h2 class="<?php echo $boxed ?> animation animated-item-1">
<?php echo $slider->post_title ?>
</h2>
<p class="<?php echo $boxed ?> animation animated-item-2">
<?php echo do_shortcode( $slider->post_content ) ?>
</p>
<?php if( $has_button ){ ?>
<a class="btn btn-md animation animated-item-3" href="<?php echo $button_url ?>"><?php echo $button ?></a>
<?php } ?>
</div>
</div>
<?php if($columns){ ?>
<div class="col-sm-6 hidden-xs animation animated-item-4">
<div class="centered" style="margin-top: 129px;">
<div class="embed-container">
<?php echo $embed_code; ?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</div><!--/.item-->
<?php } // endforeach ?>
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="icon-angle-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="icon-angle-right"></i>
</a>
</section>