Bootstrap и ширина изображения

-1

Я использую Bootstrap 3, и моя страница должна иметь 2 строки. Первая строка должна иметь два логотипа (ширина 219 пикселей и ширина 61 пиксель) и меню div. Второй ряд должен иметь большой логотип (ширина 749 пикселей) и div меню. Поэтому я написал следующий код:Bootstrap и ширина изображения

 <div class="row"> 
      <div class="col-md-5"> 
       <img src="images/LEFT_LOGO.jpg" class="img-responsive"> 
      </div> 
      <div class="col-md-5"> 
       <img src="images/RIGHT_LOGO.jpg" class="img-responsive pull-right"> 
      </div> 
      <div class="col-md-2">Right menu 1</div> 
     </div> 
     <div class="row"> 
      <div class="col-md-10"> 
       <img src="images/BIG_LOGO.jpg" class="img-responsive"> 
      </div> 
      <div class="col-md-2">Right menu 2</div> 
     </div>

Когда я запускаю мою страницу HTML затем RIGHT_LOGO.jpg и BIG_LOGO.jpg не выравнивать правильно. Как я могу настроить его так, чтобы LEFT_LOGO.jpg совпала с левой стороной BIG_LOGO.jpg и RIGHT_LOGO.jpg выравнивается с правой стороны BIG_LOGO.jpg? Кажется, класс col-md-10 должен быть равен ширине BIG_LOGO.jpg. Но я не уверен, как подойти к этой проблеме.

источник

2015-01-27 inzzz

Вот отправная точка. Можете ли вы продемонстрировать проблему? http://jsfiddle.net/isherwood/7qL3fkwz – isherwood

В основном Ник Тибери рассказал об этом решении. Но это решение искажает качество изображения, так как это изображение имеет низкое разрешение. – inzzz

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

Попробуйте установить ширину BIG_LOGO.jpg на 100%. Это должно заполнить ширину col-md-10, а левое и правое изображения должны совпадать с соответствующими сторонами.

<div class="col-md-10"> 
    <img src="images/BIG_LOGO.jpg" class="img-responsive" style="width: 100%"> 
</div>

источник

2015-01-27 19:28:11

Таким образом, они действительно правильно выстраиваются, но он растягивается BIG_LOGO.jpg. Есть ли лучшие решения? – inzzz

Вы можете просто наложить максимальную ширину на свой контейнер, например. '

'. Это должно свести к минимуму растяжение изображения. –

Ник, ты совершенно прав. Он работает, я должен изменить максимальную ширину контейнера. Спасибо. Ты спас мой день! – inzzz

Если я правильно понять, добавив pull-right класс нижнего изображения решает эту проблему.

<div class="row"> 
    <div class="col-md-10"> 
     <img src="images/BIG_LOGO.jpg" class="img-responsive pull-right">

Demo

И да, ваше большое изображение должно быть достаточно большим.

источник

2015-01-27 21:19:03 isherwood

Обновления для Fiddle. http://jsfiddle.net/isherwood/7qL3fkwz/6 – isherwood

К сожалению, мое большое изображение недостаточно велико. – inzzz

Чем это не совсем понятно, о чем вы просите. – isherwood

Bootstrap и ширина изображения

ответ

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