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

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

仅将预览代码放入模态中。

<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();
});

在我的情况下，我认为无法通过高度或宽度设置图像预览，因为裁剪区域不准确。因此，限制上传最大大小并使用overflow：auto。

为了更好的外观，请输入班级btn：

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

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

2 个答案: