如何限制模態圖像預覽的大小？

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

我的問題就來了。我試圖限制模態對話框的寬度，但它不適合響應式設計。

來源

2015-09-15 Blkc

其中一個解決方案，以保持圖像內的模式，同時屏幕尺寸的變化是使用媒體查詢。

你在這裏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

來源

2015-09-16 03:46:32 Shehary

我做根據您的回答一些小的調整，它完美的作品。我想關鍵在於使用媒體查詢不同大小的屏幕。非常感謝！ – Blkc

是的，媒體查詢是你的朋友處理不同的屏幕尺寸，你是最受歡迎的 – Shehary

我幾乎做同樣的事情，這或許有用：

只放預覽代碼模式。

<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：auto。

爲了更好的外觀，把類BTN：

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

來源

2015-11-10 21:03:51 user3706926

如何限制模態圖像預覽的大小？

回答

相關問題