sonal form india Ответов: 1

Как я могу сделать свое фоновое изображение отзывчивым с помощью bootstrap?

мне нужно сделать фоновое изображение отзывчивым, чтобы оно искажалось в мобильном представлении

Что я уже пробовал:

мое кодирование-это 

<div class="jumbotron img img-responsive" style="background-color:white;object-fit:contain;background-size:cover; background-repeat:no-repeat; background-image:url(images/1.png);
	background-size:100% 100%;
	 ">

1 Ответов

Рейтинг:
2

Richard Deeming

Удалить дубликат background-size декларация:

... background-size:cover; ... background-size:100% 100%;

Второе объявление переопределяет первое и заставляет ваше изображение растягиваться до ширины и высоты контейнера.

CSS3 background-size свойство[^]
Могу ли я использовать... CSS3 Background-параметры изображения[^]

sonal form india

Привет, спасибо за ваш ответ, но он не работает, я удалил один из контейнеров размера, но все равно он тот же, изображение идет растягивается в мобильном представлении.

Richard Deeming

Вы удалили вторую background-size декларация? (background-size: 100% 100%)

Или вы удалили первый? (background-size: cover)

sonal form india

я пробовал и с тем , и с другим, удаляя первое-сохраняя второе и наоборот

Richard Deeming

Вам нужно удалить 100% 100% один, и держи cover один.

Вам также нужно будет проверить, поддерживает ли используемый вами браузер background-size:cover - например, если вы используете IE8, он не будет работать.

sonal form india

я сохранил прикрытие и использую браузер chrome.

когда я держу обложку, картинка не заполняется полностью, я должен прокрутить ее вправо, чтобы увидеть полное изображение, оно не реагирует.
Более ранний пик был полон, но растянут.

Richard Deeming

Можете ли вы создать простой JSFiddle[^] чтобы продемонстрировать?