Bootstrap отзывчивый вопрос об изображении

Я новичок ко всему сценарию Bootstrap. Попытки поместить изображение как NavBar бренд и его изменение размеров, когда окно делаетBootstrap отзывчивый вопрос об изображении

<a class="navbar-brand" href="#"><img alt="Brand" src="images/logo.png" class="img-responsive" /></a>

Я также попытался img-fluid и добавлением style='width:100%', но ничего не работает, а его размер всегда статичен.

источник

2016-03-30 PyRoss

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

см. Здесь: https://jsfiddle.net/narv0d46/ - он работает! –

Облекитесь картинку max-width:100%, будет работать

источник

2016-03-30 08:38:48

Попробуйте это,

a { 
    display: block; 
    width: /* depending on how much space you wanted for your navbar-brand */ 
} 

img { 
    max-width: 100%; 
}

источник

2016-03-30 08:41:47

С изображениями вы хотите добавить:

.img-responsive { 
    height: auto; // the height will be in the images correct aspect ratio. 
    max-width: 100%; //Keep the image width the same as it's parents container. 
}

источник

2016-03-30 08:43:26

Вы видели его часть HTML. он уже добавил, что класс –

Просто потому, что он добавил класс, это не значит, что у класса есть стиль, который я предложил? –

Как насчет того, чтобы посмотреть здесь http://getbootstrap.com/css/#images-responsive. класс уже применяет max-width: 100% ;, height: auto; и отображение: блок; –

Ваш код работает хорошо. Я пробовал такой же код здесь. Пожалуйста, проверьте.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a class="navbar-brand" href="#"><img alt="Brand" src="http://img.logospectrum.com/dec/dummy-logo.jpg" class="img-responsive" /></a>

источник

2016-03-30 09:14:46 Vinaya

Bootstrap отзывчивый вопрос об изображении

ответ

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