Img responsive не работает

img-responsive в Bootstrap не работает

согласно http://getbootstrap.com/css/#images-responsive, я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью

Но это не работает.

Исходный размер изображения составляет 284×191

Когда я открываю браузер на 1920*1080 размер экрана, размер изображения составляет 284×191 . Но когда я открываю браузер с размером экрана 1280*720, размер изображения остается прежним.

Я не знаю, что я сделал не так, чтобы динамически уменьшить размер изображения. Спасибо за помощь.

6 ответов

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive к тегу img следующим образом:

Почему bootstrap class center-block с img-responsive не позиционирует изображение в центре

Я пытаюсь выровнять изображение по центру, используя классы bootstrap img-responsive и center-block. Но почему-то изображение не выравнивается по центру горизонтально при тестировании из браузера (IE и chrome). Странно, что тот же html при попытке использовать fiddle выравнивает его по центру. Не.

В Bootstrap 4 синтаксис class=»img-fluid»

Все, что вам нужно, — это width:100% . Использование col-xs-12:

Попробуйте этот код

img-responsive делает max-width:100% , если вы хотите, чтобы изображение было полной ширины (хотя на самом деле оно намного меньше ширины обычного экрана), вам нужно заставить его быть width:100% .

используйте для версии bootstrap 4

Вам нужно обернуть тег Img любым классом начальной загрузки. Как я сделал в качестве div с классом col-lg-4.

Если вы не обернуты тегом div

У меня была та же проблема.

Я понял, что использую bootstrap 4 (а не 3).

Изменение его обратно на bootstrap 3 исправило это для меня.

Похожие вопросы:

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

Мне нужна помощь. img-responsive не работает с этим кодом. div.container-main < margin-left: auto; margin-right: auto; text-align: center; >Тогда код HTML-это вот этот

Я использую плагин JQuery fullPage.js с Bootstrap 3.2, у меня есть некоторые проблемы в Google Chrome. Например : Я использую Bootstrap 3.2 img-responsive на демо-странице fullPage. Bootstrap 3.2.

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive.

Я пытаюсь выровнять изображение по центру, используя классы bootstrap img-responsive и center-block. Но почему-то изображение не выравнивается по центру горизонтально при тестировании из браузера.

Я использую bootstrap 3.3.6 и использую класс img-responsive для отзывчивости изображений. Я нашел новое имя класса img-fluid, но его нет в версии 3.3.6. Может ли кто-нибудь сказать, в чем разница.

Я только учусь разработке переднего плана. Я хотел бы, чтобы вы сказали мне, почему img-responsive не работает. Вот мой код. И да, если я делаю пару других плохих практик, скажите мне. HTML:

С тех пор как вышел bootstrap 4, я им пользуюсь. Я видел, что ты не можешь им воспользоваться. Поэтому я воспользовался этим: .img-fluid< max-width: 100%; height: auto; Но это.

Я изучаю bootstrap, следуя некоторым учебным пособиям. Я пытался узнать больше о .img-responsive от . Но я не смог найти .img-responsive на.

Я хочу сделать логотип отзывчивым, поэтому я добавил img-reponsive и col-xs-12 в класс тегов img , а также указал width: 100% во внешней таблице стилей, но он не работает. Я сделал логотип правой.

Источник

Bootstrap img-responsive не работает, картинка все равно длиннее экрана

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

5 ответов

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive к тегу img следующим образом:

img-responsive в Bootstrap не работает

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это не работает. Вот мой код, .

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

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

а также попробуйте это :

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

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

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

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

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

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

Примечание: width=»100%» не является W3C допустимым. Но это работает почти во всех современных или старых браузерах.

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

Я использую bootstrap 3.3.6 и использую класс img-responsive для отзывчивости изображений. Я нашел новое имя класса img-fluid, но его нет в версии 3.3.6. Может ли кто-нибудь сказать, в чем разница между img-responsive и img-fluid? img-responsive просто изменяет размер изображения в соответствии с.

Я только учусь разработке переднего плана. Я хотел бы, чтобы вы сказали мне, почему img-responsive не работает. Вот мой код. И да, если я делаю пару других плохих практик, скажите мне. HTML:

Похожие вопросы:

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

Мне нужна помощь. img-responsive не работает с этим кодом. div.container-main < margin-left: auto; margin-right: auto; text-align: center; >Тогда код HTML-это вот этот

Я использую плагин JQuery fullPage.js с Bootstrap 3.2, у меня есть некоторые проблемы в Google Chrome. Например : Я использую Bootstrap 3.2 img-responsive на демо-странице fullPage. Bootstrap 3.2.

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive.

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это.

Я использую bootstrap 3.3.6 и использую класс img-responsive для отзывчивости изображений. Я нашел новое имя класса img-fluid, но его нет в версии 3.3.6. Может ли кто-нибудь сказать, в чем разница.

Я только учусь разработке переднего плана. Я хотел бы, чтобы вы сказали мне, почему img-responsive не работает. Вот мой код. И да, если я делаю пару других плохих практик, скажите мне. HTML:

Я хочу, чтобы img в карусели реагировал. Высота должна быть 100vh, но ширина должна быть такой же широкой, как она идет, в зависимости от того, насколько велик img. Переполненная часть должна быть.

С тех пор как вышел bootstrap 4, я им пользуюсь. Я видел, что ты не можешь им воспользоваться. Поэтому я воспользовался этим: .img-fluid< max-width: 100%; height: auto; Но это.

Я хочу сделать логотип отзывчивым, поэтому я добавил img-reponsive и col-xs-12 в класс тегов img , а также указал width: 100% во внешней таблице стилей, но он не работает. Я сделал логотип правой.

Источник

bootstrap-3-img-responsive не работает

Я построил небольшой сайт для развлечения, знакомясь с bootstrap.

Проблема у меня в том, что изображение логотипа не реагирует, как бы я ни старался.

Код кажется довольно простым я уверен что просто упускаю незначительную деталь:

2 ответа

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это не работает. Вот мой код, .

Используя Bootstrap 3 на embed element, если использовать ’embed-responsive-16by9′, он правильно работает. Но если я использую embed-responsive-21by9, это не сработает! Почему? Как я могу это исправить? Это работает:

Сначала удалите атрибут max-width: 184px из тега изображения

Хотя было бы лучше избегать использования встроенного стиля:

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

Если вы все еще сталкиваетесь с этой проблемой, следующим шагом будет использование JavaScript

Этот код должен быть включен после элемента в документе, иначе он не сможет найти указанный элемент, так как он еще не будет существовать.

Теперь, когда вы добавили пример к своему вопросу, вы можете заставить изображение принять его естественный размер, заменив следующий CSS:

Я считаю, что использование display: table мешает вашему дизайну. Ниже приведены два метода достижения одного и того же макета без взломов.

CSS3 Способ

Все соответствующие современные браузеры поддерживают этот метод, поэтому, если вы не заботитесь об обратной совместимости со старыми браузерами, вы можете использовать этот метод.

Табличный способ

Для обратной совместимости вы можете использовать этот метод.

Почему img-responsive в сочетании с pull-right не масштабируется должным образом на мобильных устройствах? У меня есть следующий код:

Обновление: вот последняя версия jsFiddle . Скорее всего, вам придется изменить размер панели результатов или даже разбить ее на собственное окно, чтобы увидеть ее во всей красе. Как вы можете видеть, у меня есть изображение логотипа 400×200, которое я попытался сделать отзывчивым (через класс.

Попробуйте изменить max-width на width: 100% , чтобы он занимал 100% ширины контейнеров, но по мере изменения ширины контейнеров будет меняться и размер изображений, при этом всегда сохраняется покрытие ширины 100%.
Это SHOULD сработает, если он не даст мне знать, и я немного его взломаю. Я просто нахожусь на своем телефоне, поэтому я действительно не хочу использовать его где-либо с сенсорной клавиатурой. Если это не сработает, я взломаю его на своем PC завтра днем :D!

Пс. Есть ли причина, по которой вы объявляете класс .header-logo в одном div, а затем снова в следующем div даете ему тот же класс. Я понимаю, если бы это был другой блок div, но это, по сути, логотип заголовка внутри логотипа заголовка

Похожие вопросы:

Я искал этот ответ на img-responsive, не уменьшая размер изображения. Я перепробовал все ответы, которые нашел здесь, и все же это, похоже, не работает. Вы можете найти изображение, на которое я.

Мне нужна помощь. img-responsive не работает с этим кодом. div.container-main < margin-left: auto; margin-right: auto; text-align: center; >Тогда код HTML-это вот этот

Я использую плагин JQuery fullPage.js с Bootstrap 3.2, у меня есть некоторые проблемы в Google Chrome. Например : Я использую Bootstrap 3.2 img-responsive на демо-странице fullPage. Bootstrap 3.2.

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это.

Используя Bootstrap 3 на embed element, если использовать ’embed-responsive-16by9′, он правильно работает. Но если я использую embed-responsive-21by9, это не сработает! Почему? Как я могу это.

Почему img-responsive в сочетании с pull-right не масштабируется должным образом на мобильных устройствах? У меня есть следующий код:

Обновление: вот последняя версия jsFiddle . Скорее всего, вам придется изменить размер панели результатов или даже разбить ее на собственное окно, чтобы увидеть ее во всей красе. Как вы можете.

Я использую bootstrap 3.3.6 и использую класс img-responsive для отзывчивости изображений. Я нашел новое имя класса img-fluid, но его нет в версии 3.3.6. Может ли кто-нибудь сказать, в чем разница.

Я только учусь разработке переднего плана. Я хотел бы, чтобы вы сказали мне, почему img-responsive не работает. Вот мой код. И да, если я делаю пару других плохих практик, скажите мне. HTML:

С тех пор как вышел bootstrap 4, я им пользуюсь. Я видел, что ты не можешь им воспользоваться. Поэтому я воспользовался этим: .img-fluid< max-width: 100%; height: auto; Но это.

Источник

Bootstrap «img-responsive» не работает в моем коде, почему?

Я хочу сделать логотип отзывчивым, поэтому я добавил img-reponsive и col-xs-12 в класс тегов img , а также указал width: 100% во внешней таблице стилей, но он не работает.

Я сделал логотип правой стороной, и он поставляется в ноутбуке, но не виден в мобильных телефонах, поэтому я добавил img-responsive в и указал width: 100% и height: auto; для img-responsive во внешней таблице стилей, и я также указал @media , но это то же самое

3 ответа

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive к тегу img следующим образом:

img-responsive в Bootstrap не работает

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это не работает. Вот мой код, .

если вы используете bootsrap v4, вы должны знать, что img-responsive был изменен на img-fluid, а col-xs-12 был изменен на col-12. Вы можете посмотреть документацию по сайту Bootstrap V4.2 docs

Bootstrap img-fluid img-responsive был изменен на img-fluid

Вы пробовали удалить padding-left:200px; из мобильного запроса media также с position:fixed; float:right не является хорошей практикой, и вам нужно использовать img-fluid вместо img-responsive.

Похожие вопросы:

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

Мне нужна помощь. img-responsive не работает с этим кодом. div.container-main < margin-left: auto; margin-right: auto; text-align: center; >Тогда код HTML-это вот этот

Я использую плагин JQuery fullPage.js с Bootstrap 3.2, у меня есть некоторые проблемы в Google Chrome. Например : Я использую Bootstrap 3.2 img-responsive на демо-странице fullPage. Bootstrap 3.2.

В настоящее время я следую учебнику по bootstrap, но, похоже, что-то не понимаю. Я хочу сделать мои изображения отзывчивыми, и tut утверждает, что это делается путем добавления класса img-responsive.

согласно http://getbootstrap.com/css/#images-responsive , я хочу сделать свой образ для поддержки адаптивного веб-сайта с помощью Но это.

Почему img-responsive в сочетании с pull-right не масштабируется должным образом на мобильных устройствах? У меня есть следующий код:

Я пытаюсь выровнять изображение по центру, используя классы bootstrap img-responsive и center-block. Но почему-то изображение не выравнивается по центру горизонтально при тестировании из браузера.

Я использую bootstrap 3.3.6 и использую класс img-responsive для отзывчивости изображений. Я нашел новое имя класса img-fluid, но его нет в версии 3.3.6. Может ли кто-нибудь сказать, в чем разница.

Я только учусь разработке переднего плана. Я хотел бы, чтобы вы сказали мне, почему img-responsive не работает. Вот мой код. И да, если я делаю пару других плохих практик, скажите мне. HTML:

С тех пор как вышел bootstrap 4, я им пользуюсь. Я видел, что ты не можешь им воспользоваться. Поэтому я воспользовался этим: .img-fluid< max-width: 100%; height: auto; Но это.

Источник