img не отвечает, когда navbar изменяет размер кроппера js - PullRequest
Новая
       11

img не отвечает, когда navbar изменяет размер кроппера js

0 голосов
/ 16 января 2020

В настоящее время я использую кроппер JS, и у меня возникла проблема с отзывчивостью контейнеров.

Когда я щелкнул nav, чтобы свернуть боковую панель, контейнер img для кроппера не изменяет размеры, поэтому когда я щелкнул, чтобы снова открыть боковую панель, изображение перекрывается с его контейнером

Вот как это выглядит, когда страница загружается первой, изображение было внутри контейнера div.

enter image description here

И вот, когда я попытался свернуть боковую панель или изменить размер браузера, чтобы свернуть боковую панель, это то, что происходит.

enter image description here

размер контейнера div изменяется, поскольку он выглядит шире, но изображение не адаптируется к изменениям, поэтому при повторном открытии боковой панели это выглядит следующим образом.

enter image description here

Изображение проходит над контейнером, а не изменяет его размер для адаптации к контейнеру. Теперь это формат моего HTML с использованием шаблона adminlte. 

<link rel="stylesheet" href="cropper/cropper.css">
<script src="cropper/cropper.js"></script>
<script src="cropper/jquery-cropper.js"></script>
<section class="content">
  <div class="container-fluid">
    <div class="animated fadeIn mb-4">
      <div class="row">
        <div class="col-md-6">
          <div class="card card-info">
            <div class="card-body text-center">
              <div>
                <img id="imageId" class="img-fluid my-3" src="img/photo2.png" alt="Photo">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>





var imageId = $('#imageId') 

var imgId = imageId.cropper({
      scalable:true,
      autoCrop: false,
      center: true,
      movable: false,
      zoomable:true,
      cropBoxMovable: true,
      cropBoxResizable:true,
      responsive: true,
      viewMode:2
    });
...