Я не использую 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>
Не могли бы вы показать мне, как это правильно делать? Спасибо.
@LaljiTadhani Я сделал это, сэр. По-прежнему нет ...
Попробуйте установить образ max-width: 100%
?
Если я правильно понял ваш вопрос, попробуйте установить это:
.img-responsive {
max-width: 100%;
}
добавить класс в img "img-responsive"