Изображение слайдера Bootstrap, получаемое в ответном виде

Есть ли какое-либо решение для проблемы с растяжкой изображения для загрузочного слайдера для отзывчивого просмотра? я не хочу, чтобы установить по умолчанию высотыИзображение слайдера Bootstrap, получаемое в ответном виде

http://getbootstrap.com/examples/carousel/

Я попытался с выше слайдером, который слайдер по умолчанию приведен в Twitter Bootstrap. когда я включил изображения в этот слайдер, он растягивался. Если кто-нибудь сталкивался с этой проблемой, дайте мне знать решение

источник

2015-09-08 Saran

Можете ли вы предоставить свой живой URL или поделиться своим кодом с нами? –

Я делаю локально, извините, я не знаю, как поделиться своим кодом в js скрипке. поэтому я добавил привязку к моему отзывчивому представлению. – Saran

Перейдите на страницу https://jsfiddle.net/ и код в соответствующий раздел. На левой стороне добавьте Bootstrap Css и Js Link на вкладку «Внешние ресурсы». Нам будет легче отлаживать. –

Я не уверен, если вы уже ищете, но Bootstrap также предоставляет класс для реагирующих изображений. Просто добавили его в img-tag.

HTML

<div class="slider"> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
     <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 
    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 1"> 
     <div class="carousel-caption"> 
     <h3>Caption Text</h3> 
     </div> 
    </div> 
    <div class="item"> 
    <img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 2"> 
    <div class="carousel-caption"> 
     <h3>Caption Text</h3> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="http://dreamatico.com/data_images/cat/cat-6.jpg" class="img-responsive" alt="Slider 3"> 
    <div class="carousel-caption"> 
     <h3>Caption Text</h3> 
    </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left"></span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right"></span> 
    </a> 
    </div> <!-- Carousel --> 
</div>

JavaScript

$('.carousel').carousel({ 
    interval: 3000 
})

Посмотри также на jsfiddle.

источник

2015-09-08 12:17:48

Изображение слайдера Bootstrap, получаемое в ответном виде

ответ

Смежные вопросы