Bootstrap img-отзывчивый не работает, изображение все еще длиннее экрана

<div class="container"> 
    <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" role="listbox"> 
    <div class="item active col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 

    <div class="item col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 

    <div class="item col-xs-12"> 
     <img src="big1.jpg" class="img-responsive" alt="..."> 
    </div> 
</div>

Я попытался выполнить поиск, но ничто не решило мою проблему. Я не хочу использовать display: table, поскольку я читал в подобном вопросе. Любая помощь будет очень оценена.Bootstrap img-отзывчивый не работает, изображение все еще длиннее экрана

источник

2017-01-28 Kateryna

Я не вижу никаких проблем, вот скрипка https://jsfiddle.net/wamosjk/n1up4xog/ У вас есть пользовательский css, который вы используете для своей карусели –

@Steve K Нет, у меня нет никаких обычаев css, он масштабируется отлично, если экран очень маленький. – Kateryna

Если вы перетащите окно больше в демонстрацию скрипта, которую я поделил, вы увидите, что изображение никогда не разбивает контейнер, поэтому должна быть какая-то другая проблема, чем ваша разметка, потому что я использовал ту же самую разметку, что и вы, кроме того, что я добавил пару закрытия тегов div, которые вам не хватает. –

Добавьте эту строку в файл CSS, чтобы исправить эту проблему:

.img-responsive{ width:100% !Important;}

источник

2017-01-28 04:25:39

не работал для меня. Когда я масштабирую изображение больше - img-responsive работает нормально, но если я попытаюсь масштабировать только немного - изображение слишком длинное – Kateryna

Чтобы сохранить изображение в ответ вы лучше использовать

img{ 
    max-width: 100% 
}

согласно вашим комментарием кажется, что это КСС было переписанный некоторыми другими css, так что вы можете использовать специфичность css здесь, как показано ниже

img, .container img.img-responsive{ 
    max-width: 100%; 
}

это будет сохранить ваш IMG внутри вашего размера экрана, и это общая техника, которую мы использовали, чтобы наши изображения отзывчивым

источник

2017-01-28 04:29:55 Rahul

В контрольном элементе оно отображается как скрещенный img { max-width: 100% }, но мой основной Файл css идет после загрузки, поэтому он должен работать нормально. Извините, я noobie. – Kateryna

у вас есть какая-нибудь живая демонстрация или скрипка, так что я могу посмотреть, кажется, что некоторые другие css переписывают этот – Rahul

@Kateryna Я обновил ответ, который он должен сработать для вас, если не лучше поделиться какой-то живой демонстрацией – Rahul

Изменение .img-responsive внутри bootstrap.css к следующему:

.img-responsive { 
    display: block; 
    max-width: 100%; 
    width: 100%; 
    height: auto; 
}

По какой-то причине, добавив ширина: 100% к mix делает img-responsive работа. Он также работает как в Firefox, так и в Chrome.

, а также попробовать это:

.item img { 
    width:100%; 
}

источник

2017-01-28 05:21:45

Установите width свойство в изображении.

<img src="http://placehold.it/1920x1080" alt="Carousel image" class="img-responsive" width="100%" />

Примечание: width="100%" не W3C действительным. Но он работает почти все современные или старый браузер.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<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" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/1920x1080" alt="..." class="img-responsive" width="100%" /> 
 
    </div> 
 
    </div> 
 
</div>

Вы можете попробовать это.

источник

2017-01-28 05:34:33 Rahul

Я нашел ответ, я пробовал все решения, которые были размещены здесь, но col-xs-12 col-md-10 col-md-offset-1 работал для меня, поэтому я добавил col-md -10 col-md-offset-1 до моей предыдущей разметки.

источник

2017-01-28 18:55:12 Kateryna

Bootstrap img-отзывчивый не работает, изображение все еще длиннее экрана

ответ

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