Twitter bootstrap 如何在modal中限制图像预览的大小？

我正在使用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-->

x
上传一张你自己的照片




裁剪与上传
上传


接近

我的问题是，当用户上传一张大图片时，图片扩展了模式，或者比手机中的模式更大。我尝试过限制模态对话框的宽度，但对于响应性设计来说，这不是一个好的解决方案

---

当屏幕大小更改时，将图像保留在模式内的解决方案之一是使用媒体查询

这里有

img

inline样式

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

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

---

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

仅在模式中放置预览代码

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

在我的例子中，我看到图像预览不能通过高度或宽度设置，因为裁剪区域将不准确。因此，请限制上载最大大小，并使用overflow:auto设置模态体css

为了获得更好的外观，请将btn类设置为：

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

我根据您的答案做了一些小的调整，效果非常好。我想关键在于对不同大小的屏幕使用媒体查询。非常感谢！是的，在处理不同的屏幕尺寸时，媒体查询是您的朋友，我们非常欢迎您

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

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

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

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