Bootstrap 3: centered отзывчивое изображение с укладкой

Я пытаюсь центрировать стилизованное отзывчивое изображение, но оно, похоже, не работает. После удаления классов один за другим я обнаружил, что мой класс «portimage», кажется, нарушает отзывчивость.Bootstrap 3: centered отзывчивое изображение с укладкой

Я не хочу, чтобы изображения были больше 700 пикселей, и я хотел бы, чтобы они имели светлую границу вокруг них.

Вот код:

<div class="row mtmini"> 
     <div class="col-lg-12"> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch1-Home.jpg"> 
      <br> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch2-Menu.jpg"> 
      <br> 
      <img class="img-responsive center-block portimage" src="assets/img/CostcoSketch3-CC.jpg"> 
     </div> 
</div>

Вот CSS для "portimage" класса:

.portimage { 
max-width: 700px; 
border:1px solid lightgray; 
}

Извините, если это глупый вопрос - просто начать. Я пробовал искать это, но я не нахожу решение, которое обращается к стилю изображения, нежели центрирование и отзывчивость. Заранее спасибо!

источник

2016-08-31 Sarah T.

Чтобы центрировать изображения, добавьте 'text-align: center' в родительский элемент. Также сочетание «max-width: 700px' и' width: 100% »будет иметь изображение шириной, чем контейнер, но не более 700 пикселей. – pol

По центру блок будет центрирован. В моем компьютере он работает –

Должно быть хорошо работает, пожалуйста, проверьте, правильно ли вставлена ваша ссылка CSS для начальной загрузки. Кроме того, если вы используете инструменты сборки, такие как gulp/grunt, попробуйте перезапустить задачу просмотра.

Кроме того, является ли класс 'mtmini' добавлением любых стилей в div 'row'?

источник

2016-08-31 18:10:53

Bootstrap 3: centered отзывчивое изображение с укладкой

ответ

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