图像非常小

Question

我使用bootstrap向用户显示上传前所选图片的预览。出于某种原因，他们真的很小。知道为什么吗？

@extends('layouts/main')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-default">
                <div class="card-header">Advertise Your Property</div>
                @if (count($errors) > 0)
                  <ul>
                    @foreach ($errors->all() as $error)
                      <li>{{ $error }}</li>
                    @endforeach
                  </ul>
                @endif

                <div class="card-body">
                    <form method="POST" action="/createadvert" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="form-group row">
                            <label for="photo" class="col-md-3 col-form-label text-md-right">Images</label>
                            <div class="col-md-9">
                              <input type="file" name="photo" id="myFile" multiple />
                            </div>
                          </div>
                          <div class="form-group row">

                              <div class="form-group row previews">

                            </div>
                          </div>

                          <script>
                          /*=============== Script to preview image in upload form ==============*/

                          $("#myFile").change(function(event) {
                            var $previews = $(".previews").empty();
                            [].forEach.call(this.files, function(file) {
                              var reader = new FileReader();
                              reader.readAsDataURL(file);
                              reader.onloadend = function() {
                                $previews.append(`<div class="col-4"><img src="${this.result}" class="img-fluid"/></div>`);

                              };
                            });
                          });
                          </script>


                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

我也有一些css但是在253px max-width之后不再增加。最大高度根本不起作用。

我使用的bootsrap版本是4.0。它是通过bootsrap提供的cdn传递的。

.previews {
  max-width:  253px;
  max-height: 200px;
}