如何限制模态中图像预览的大小？

Question

我正在使用 Jcrop，这是我的模态：

<!-- 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-->

当用户上传大图片并且图片扩展了模态或变得比移动设备中的模态更大时，我的问题就出现了。我尝试限制模态对话框的宽度，但这不是响应式设计的好解决方案。

Answer 1

在屏幕尺寸变化时将图像保持在模态中的一种解决方案是使用媒体查询。

这里有img 内联样式

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

当屏幕尺寸较小时，内联样式会发生这种情况

Fiddle with Inline Style

去掉这个内联样式，放到样式表中

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

要根据屏幕大小调整图像大小，请使用media queries

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

Fiddle

Answer 2

我做了几乎同样的事情，这可能有用：

1. 仅将预览代码放在模态中。

   <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>
   

在 onchange() 函数中添加此代码以打开模式并替换原始上传按钮。使用css隐藏类设置原始上传按钮。

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

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

在我的情况下，我看到图像预览不能按高度或宽度设置，因为裁剪区域不准确。所以限制上传最大大小，并设置模态体 css with overflow: auto。

为了更好的外观，把类 btn ：

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