How to limit the size of the image preview in modal?

Question

I am using Jcrop and here is my modal:

<!-- START modal-->
<div id="camera" tabindex="-1" role="dialog" aria-labelledby="cameraLabel" aria-hidden="true" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content" style="margin-left: 10px; margin-top: 10px;">
            <div class="modal-header">
               <button type="button" data-dismiss="modal" aria-hidden="true" class="close">x</button>
               <h4 id="cameraLabel" class="modal-title">Upload a photo of yourself</h4>
            </div>
            <div class="modal-body">
               <form action="/overview/setprofileimage" method="POST" enctype="multipart/form-data" id="coords">
                  <div class ="form-group">
                    <span id="err_coords" style="color: #ff0000; float: left; text-align: center; width: 100%;"></span>
                  </div><br>
                    <input type='file' id="imgAvatar" name="image" onchange="readURLAvatar(this, 'avatar');" />
                  <img id="avatar" src="#" alt="your image" style="margin-top:10px; margin-bottom:10px; max-height: 100vh; max-width: 100vh;" />
                  <div class="inline-labels">
                    <input type="hidden" id="x" name="crop[x]" />
                    <input type="hidden" id="y" name="crop[y]" />
                    <input type="hidden" id="w" name="crop[w]" />
                    <input type="hidden" id="h" name="crop[h]" />
                  </div>
                  <br>
                  <input type="hidden" size="4" id="uplloadAvatar" name="uplloadAvatar" value=""/>
                  <button type="button" class="btn btn-danger btn-sm" onclick="checkCoordsImg(1);">Crop & Upload</button>
                  <button type="button" class="btn btn-success btn-sm" onclick="checkCoordsImg(2);">Upload</button>
               </form>
               <br>
            </div>
            <div class="modal-footer">
               <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- END modal-->

My problem comes when user uploads a big image and the the picture extended the modal or become bigger than the modal in mobile. I tried limiting the width of the modal-dialog but it is not a good solution for responsive design.

Answer 1

I did almost the same thing and this maybe usefull :

1. Put only preview code in modal.

   <div id="camera" class="modal fade">
   <div class="modal-dialog modal-lg">
       <div class="modal-content">
             <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title">Please Crop this image</h4>
         </div>
   
           <div class="modal-body" style="overflow: auto; padding: 20px;">
           <img id="avatar"  />
           <br/>
           <div class="error" style="color: #ff0000;"></div>
           </div>
   
           <div class="modal-footer"><div align="center">
               <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
               <button type="button" id="upload-button" class="btn btn-primary">Upload Image</button>
               </div>
           </div>
       </div>
   </div>
   

add this code inside onchange() function to open the modal and replace original upload button. Set original upload button with css hidden class.

$('#camera').modal('show');

$('#upload-button').click(function(){
    $('#upload_form').submit();
});

As in my case, as I see it that the image preview can not be set by height or width because the crop area will not accurate. So limit the upload max size and set the modal body css with overflow: auto.

For better appearance, put class btn :

 <input type='file' class="btn btn-success" id="imgAvatar" name="image" onchange="readURLAvatar(this, 'avatar');" />

Answer 2

One of the solution to keep image inside modal while screen size change is use media queries.

You have img inline style here

<img id="avatar" src="#" alt="your image" style="margin-top:10px; margin-bottom:10px; max-height: 100vh; max-width: 100vh;" />

and with inline style this happens when screen size is small

Fiddle with Inline Style

Remove this inline style and put it in style sheet

#avatar {
    margin-top:10px;
    margin-bottom:10px;
    max-height: 100vh;
    max-width: 100vh;
}

and to adjust images size according to screen size, use media queries

@media screen and (max-width: 480px) {
    #avatar {
        margin-top:10px;
        margin-bottom:10px;
        max-height: 60vh;
        max-width: 60vh;
    }
}

Fiddle