Изображение выходит из моей колонки с помощью начальной загрузки

Я не использую CSS для стилей, но у меня есть bootstrap 3 *. Я создал столбец, который обрабатывает мою форму. Я хочу разместить свое изображение чуть ниже него, но когда я визуализирую изображение, оно выходит за пределы столбца. Изображение выходит из моей колонки с помощью начальной загрузки

Вот как я кодирую это в .html

<div class = "col-md-3" *ngIf = "showForm">
    <mat-card>
      <mat-card-content>
        <form [formGroup] = "form">
          .
          .
          .
          .
          .
            <div class = "col-md-12">
              <mat-form-field>
                <mat-select
                  placeholder = "Baranggay"
                  formControlName = "BarangayCode"
                >
                  <mat-option
                    *ngFor = "let b of barangayList"
                    [value] = "b.BarangayCode"
                  >
                    {{ b.BarangayName }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <input
            type = "file"
            class = "form-control"
            accept = "image/*"
            (change) = "changeListener($event)"
          />
          <button
            mat-raised-button
            type = "submit"
            class = "btn btn-danger pull-right"
            [disabled] = "form.invalid"
            (click) = "updateProperty()"
          >
            Update Property
          </button>
          <button
            mat-raised-button
            type = "submit"
            class = "btn btn-warning pull-right"
            (click) = "onCancel()"
          >
            Cancel
          </button>
          <div class = "clearfix"></div>

          <div
            *ngIf = "base64Image"
            class = "img-responsive img-thumbnail"
          >
            <img
              *ngIf = "base64Image"
              [src] = "
                domSanitizer.bypassSecurityTrustUrl(base64Image)
              "
            />
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>

Не могли бы вы показать мне, как это правильно делать? Спасибо.

добавить класс в img "img-responsive"

Lalji Tadhani 18.12.2018 08:26

@LaljiTadhani Я сделал это, сэр. По-прежнему нет ...

Ibanez1408 18.12.2018 08:29

Попробуйте установить образ max-width: 100%?

Chaska 18.12.2018 08:42
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
3
55
1

Ответы 1

Если я правильно понял ваш вопрос, попробуйте установить это:

.img-responsive {
  max-width: 100%;
}

Другие вопросы по теме