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

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