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

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

删除此内联样式并将其放入样式 sheet

#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

我做了几乎相同的事情，这可能有用:

只在模式中放置预览代码。

<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 隐藏 class。

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

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

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

为了更好的外观，输入class btn :

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

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

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

jcrop

twitter-bootstrap

bootstrap-modal